Erstellen eines einzelnen Eingabehandlers [Duplikat]

Question

Ich habe mehrere Eingänge. Jeder der Eingänge hat seinen eigenen Wert. Wie kann ich eine Funktion für (onChange) alle haben? Zum Beispiel

 handleChange1(event) {
    this.setState({value1: event.target.value});
  }
 handleChange2(event) {
    this.setState({value2: event.target.value});
  }
  }
 handleChange3(event) {
    this.setState({value3: event.target.value});
  }

  <input type="text" value={this.state.value1} onChange={this.handleChange1} />
  <input type="text" value={this.state.value2} onChange={this.handleChange2} />
  <input type="text" value={this.state.value3} onChange={this.handleChange3} />

Ich möchte nur einen handleChange haben

Answer 1

Wenn Sie dem ein hinzufügen name, inputkönnen Sie das außerhalb des Ereignisses verwenden.

handleChange1(event) {
    const {name, value} = event.target
    this.setState({[name]: value});
}

<input name="inputone" type="text" value={this.state.value1} onChange={this.handleChange1} />
<input name="inputtwo" type="text" value={this.state.value2} onChange={this.handleChange2} />
<input name="inputthree" type="text" value={this.state.value3} onChange={this.handleChange3} />

Answer 2

Wenn Sie mehrere gesteuerte Eingabeelemente verarbeiten müssen, können Sie jedem Element ein Namensattribut hinzufügen und die Handlerfunktion anhand des Werts von auswählen lassen, was zu tun ist event.target.name.

Zum Beispiel:

handleInputChange(event) {
  const target = event.target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const name = target.name;

 this.setState({
  [name]: value
 });
 }

render() {
return (
  <form>
    <label>
      value1:
      <input
        name="value1"
        type="checkbox"
        checked={this.state.value1}
        onChange={this.handleInputChange} />
    </label>
    <br />
    <label>
      value2:
      <input
        name="value2"
        type="number"
        value={this.state.value2}
        onChange={this.handleInputChange} />
    </label>
    <br />
    <label>
      value3:
      <input
        name="value3"
        type="text"
        value={this.state.value3}
        onChange={this.handleInputChange} />
    </label>
  </form>
 );
}
}

Answer 3

Sie können einfach Folgendes tun input name:

Code:

import React from "react";
import "./styles.css";

class MyComponent extends React.Component {
  state = {
    value1: "",
    value2: "",
    value3: ""
  };
  handleChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  };
  render() {
    console.log(this.state);
    return (
      <>
        <input
          name="value1"
          value={this.state.value1}
          type="text"
          value={this.state.value1}
          onChange={this.handleChange}
        />
        <input
          name="value2"
          value={this.state.value2}
          type="text"
          value={this.state.value2}
          onChange={this.handleChange}
        />
        <input
          name="value3"
          value={this.state.value3}
          type="text"
          value={this.state.value3}
          onChange={this.handleChange}
        />
      </>
    );
  }
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <MyComponent />
    </div>
  );
}

Demo: https://codesandbox.io/s/beautiful-brook-p46zs?file=/src/App.js:0-1092

Answer 4

Ich mache das immer per Switch Case

 handleChange(event) {
            switch (event.target.name) {
                case 'name1':
                    this.setState({ name1: event.target.value });
                    break;
                case 'name2':
                    this.setState({ name2: event.target.value });
                    break;
                 case 'name3':
                    this.setState({ name3: event.target.value });
                    break;
                default:
                    break;
            }
    }


<input type="text" name="name1" value={this.state.value1} onChange={this.handleChange1} />
  <input type="text" name="name2" value={this.state.value2} onChange={this.handleChange2} />
  <input type="text" name="name3" value={this.state.value3} onChange={this.handleChange3} />

Answer 5

Sie können für jedes Feld React Hooks useState verwenden:

const [value1,setvalue1] = useState();
<input type="text" value={value1} onChange={(e)=>setvalue1(e.target.value)}/>

Sie haben immer noch Handle-Änderungen an jeder Eingabe, aber Sie schreiben weniger Code.

Weitere Informationen zu React Hooks finden Sie hier: https://reactjs.org/docs/hooks-state.html

Answer 6

Wenn alle Eingaben gleich sind, können wir sie meiner Meinung nach dynamisch rendern, damit wir uns nicht wiederholen und den Code sauberer machen müssen. Ich denke, wir können eine Reihe von Eingaben haben, die dann dynamisch gerendert werden. Durch die Verwendung von Closure können wir für alle Eingaben eine handleChange-Funktion haben.

state={
  inputValues: []
}
handleChange(index){
  return (event)=>{
    this.state.inputValues[index] = event.target.value;
    this.setState({inputValues: this.state.inputValues})
  }
  
}

render(){
  return this.states.inputValues.map((inputValue, index)=>
    <input type="text" value={inputValue} onChange={this.handleChange(index)} />    
  )
}