ReactJs中如何用一个事件处理函数更新多个输入框？

嘿，从有3年经验的Angular转到React，确实得适应一下不同的状态处理方式～你想的用同一个变更处理函数来更新多个输入框完全没问题，而且这也是React里很常见的高效做法！

核心实现思路 #

关键是给每个<input>添加name属性，让它的值和你state里对应的字段（x、y、z）完全一致，这样就能在handleChange里动态获取到要更新的state键名，不用再逐个写处理函数啦。

1. 给输入框添加name属性

修改你的输入框代码，给每个input绑定对应state字段的name：

<tr>
  <td>
    <input name="x" value={this.state.x} onChange={this.handleChange}/>
  </td>
  <td>
    <input name="y" value={this.state.y} onChange={this.handleChange}/>
  </td>
  <td>
    <input name="z" value={this.state.z} onChange={this.handleChange}/>
  </td>
</tr>

2. 完善你的handleChange函数

你之前的思路已经很接近了，只需要通过event.target.name拿到对应的key，再结合ES6计算属性名就能动态更新state：

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

这里的[name]就是ES6的计算属性名，它会把name变量的实际值（比如x、y）作为对象的键，精准更新state里对应的字段。

完整的Class组件示例

如果需要参考完整的组件结构，大概是这样：

class MultiInputComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x: '',
      y: '',
      z: ''
    };
    // 如果你不用箭头函数定义handleChange，这里需要绑定this：
    // this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    return (
      <table>
        <tr>
          <td>
            <input name="x" value={this.state.x} onChange={this.handleChange}/>
          </td>
          <td>
            <input name="y" value={this.state.y} onChange={this.handleChange}/>
          </td>
          <td>
            <input name="z" value={this.state.z} onChange={this.handleChange}/>
          </td>
        </tr>
      </table>
    );
  }
}

额外补充：函数组件的写法（供未来参考） #

如果你之后转向React函数组件+Hooks，同样可以用类似的思路，用一个对象来统一管理状态：

import { useState } from 'react';

function MultiInputComponent() {
  const [formState, setFormState] = useState({ x: '', y: '', z: '' });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormState(prevState => ({
      ...prevState,
      [name]: value
    }));
  }

  return (
    <table>
      <tr>
        <td>
          <input name="x" value={formState.x} onChange={handleChange}/>
        </td>
        <td>
          <input name="y" value={formState.y} onChange={handleChange}/>
        </td>
        <td>
          <input name="z" value={formState.z} onChange={handleChange}/>
        </td>
      </tr>
    </table>
  );
}

内容的提问来源于stack exchange，提问作者DennyHiu