Javascript 如何创建单个输入处理程序

我有几个输入，每个输入都有自己的值。我怎么能有一个（onChange）所有输入的函数？ 比如说

 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} />

handleChange1（事件）{
this.setState（{value1:event.target.value}）；
}
handleChange2（活动）{
this.setState（{value2:event.target.value}）；
}
}
handleChange3（活动）{
this.setState（{value3:event.target.value}）；
}

---

我只想要一个handleChange

您可以对每个字段使用react hooks useState：

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

const[value1，setvalue1]=useState（）；
setvalue1（e.target.value）}/>

您仍然可以对每个输入进行句柄更改，但编写的代码更少

---

您还可以在此处查看有关react钩子的更多信息：

当您需要处理多个受控输入元素时，您可以为每个元素添加一个name属性，并让处理程序函数根据

event.target.name的值选择要执行的操作

例如：

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>
 );
}
}

handleInputChange（事件）{
const target=event.target；
const value=target.type=='checkbox'？target.checked:target.value；
const name=target.name；
这是我的国家({
[名称]：值
});
}
render（）{
返回(
价值1：


价值2：


价值3：
);
}
}
您只需使用
输入名称即可：

代码：

从“React”导入React；
导入“/styles.css”；
类MyComponent扩展了React.Component{
状态={
值1:“”，
值2:“”，
价值3:“
};
handleChange=（事件）=>{
this.setState（{[event.target.name]：event.target.value}）；
};
render（）{
console.log（this.state）；
返回(
);
}
}
导出默认函数App（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

演示：
如果在
输入中添加
名称
，则可以在事件结束时使用该名称

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} />

handleChange1（事件）{
常量{name，value}=event.target
this.setState（{[name]：value}）；
}
我总是通过开关盒来实现这一点

 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} />

handleChange（事件）{
开关（event.target.name）{
案例“名称1”：
this.setState（{name1:event.target.value}）；
打破
案例“名称2”：
this.setState（{name2:event.target.value}）；
打破
案例“名称3”：
this.setState（{name3:event.target.value}）；
打破
违约：
打破
}
}
如果所有输入都是相同的，我认为我们可以动态地呈现它们，这样我们就不需要重复自己的操作，也可以使代码更清晰。
我认为我们可以有一个输入数组，然后动态渲染。通过使用闭包，我们可以为所有输入使用一个handleChange函数

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)} />    
  )
}

状态={
输入值：[]
}
手册更改（索引）{
返回（事件）=>{
this.state.inputValues[index]=event.target.value；
this.setState（{inputValues:this.state.inputValues}）
}
}
render（）{
返回此.states.inputValues.map（（inputValue，索引）=>
)
}
这是否回答了您的问题？您可能打算使用计算属性名：
{name:value}
-->
{[name]：value}
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)} />    
  )
}