I need help by a simple question: how i can use two select forms on one site with one handleChange function? i have two select forms but every-time i am using one after the other one the value will be overwritten. Should i separate the handleChange function? I dont want to work with an npm like react select. Is anyone able to help me out here? Im really stuck on this

import React from "react";
import axios from "./axios.js";
import { useState } from "react";
import Select from "react-select";
import Creatives from "./creatives";
import FormatType from "./formattype";

export default class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      value1: "",
      manager: "",
      gpNummer: "",
      caNummer: "",
      gpNummer: "",
      advertiser: "",
      agency: "",
      campaignName: "",
      formatType: "",
      startDate: "",
      creative: "",
      enddate: "",
      error: false,
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  updateField(e) {
    this.setState({
      [e.target.name]: e.target.value,
    });
  }

  /*
  submit1() {
    axios
      .post("/Login", { mail: this.state.mail, password: this.state.password })
      .then((response) => {
        console.log(response.data);
        if (response.data.success) {
          /*location.replace('/');
        } else {
          this.setState({ error: response.data.error });
        }
      });
  }

  submit2() {
    axios
      .post("/Login", { mail: this.state.mail, password: this.state.password })
      .then((response) => {
        console.log(response.data);
        if (response.data.success) {
          /*location.replace('/');
        } else {
          this.setState({ error: response.data.error });
        }
      });
  }

*/
  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  handleSubmit(e) {
    const {
      gpNummer,
      caNummer,
      advertiser,
      creative,
      agency,
      campaignName,
      formatType,
      startDate,
      enddate,
    } = this.state;
    e.preventDefault();
  }

  render() {
    return (
      <div className="Main">
        <div className="allforms">
          <span id="Linetitle">New LineItem:</span>
          {this.state.error && <div className="error">{this.state.error}</div>}

          <label> Manager </label>
          <select manager={this.state.manager} onChange={this.handleChange}>
            <option manager="Katja">Katja</option>
            <option manager="Seba">Seba</option>
            <option value="aylina">aylina</option>
            <option value="Christina">Christina</option>
          </select>

          <label> GP-Nummer </label>
          <input
            type="text"
            onChange={(e) => this.updateField(e)}
            name="gpNummer "
            placeholder=" GP-Nummer  "
          />
          <label> CA-Nummer </label>
          <input
            type="text"
            onChange={(e) => this.updateField(e)}
            name="caNummer "
            placeholder=" Fill in CA-Nummer "
          />
          <label> Werbetreibender </label>
          <input
            type="text"
            onChange={(e) => this.updateField(e)}
            name="advertiser"
            placeholder=" Fill in Werbetreibender "
          />
          <label> Agentur </label>
          <input
            type="text"
            onChange={(e) => this.updateField(e)}
            name="agency "
            placeholder=" Fill in Agentur"
          />
          <label> Media Campaign Name </label>
          <input
            type="text"
            onChange={(e) => this.updateField(e)}
            name="campaignName "
            placeholder=" Fill in Campaign Name"
          />

          <label> Formattyp </label>
         {/* <div className="select"> <FormatType /></div>*/}
         <select value1={this.state.creative} onChange={this.handleChange}>
            <option value1="MR">MR</option>
            <option value1="premiumAdbundle">premiumAdbundle</option>
            <option value1="adBundle">AdBundle</option>
            <option value1="fireplace">Fireplace</option>
          </select>

          <label> Creative </label>
          <select value={this.state.formatType} onChange={(e)=>this.handleChange(e)}>
            <option value="native">native</option>
            <option value="display">display</option>
            <option value="advertorial">advertorial</option>
            <option value="mobile">mobile</option>
          </select>
          {/*<div className="select"><Creatives /></div>*/}

          <label>Start Date </label>
          <input
            type="date"
            onChange={(e) => this.updateField(e)}
            name="startDate"
            placeholder=" Fill in Formattyp"
          />
          <label>End Date </label>
          <input
            type="date"
            onChange={(e) => this.updateField(e)}
            name="enddate"
            placeholder=" Fill in Formattyp"
          />

          <input
            onClick={(e) => this.submit1(e)}
            type="submit"
            value="Save to List"
          />
          <input
            onClick={(e) => this.submit2(e)}
            type="submit"
            value="Push to gam"
          />
        </div>
      </div>
    );
  }
}

CodePudding user response：

You can write your handlechange this way :

onChange={e => this.handleChange(e, customParam)}>

This way, you can add a condition check on your handlechange function on the second parameter, and change behaviour as needed.

CodePudding user response：

As someone already suggested, you can write a single function that accepts two parameters (the event and the state that you change).

Also, if you want, you can use a single State, but as an Array. In you case you can create the state like this:

this.state{
    Form: {
        State1: '',
        State2: '',
    },
    // other states
}

and then you can access to a single state with Form.State1.

So, you can write a function like the following one to update the single state:

const updateField = (name, value) => {
    //Change the state with the new field updated
    const newData = { ...Form, [name]: value };
    this.setState({Form: newData});
};

And on the single component, to update the state, you have to call on onChange, I show you an example with input:

<input
        type="text"
        onChange={(e) => this.updateField(e)}
        name="gpNummer "
        placeholder=" GP-Nummer  "
        
        value={this.state.Form.State1}
        onChange={ev => updateField(ev.target.name, ev.target.value)}
/>