Question

我是React的新手，我有3年的Angular经验，这就是为什么React对我来说很奇怪。我创建了许多这样的输入：

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

从我到目前为止学到的东西，我不得不为每个<input>逐个处理这个输入变化事件，我觉得很费力。我可以编写一个函数来更新上面的所有输入吗？像：

   handleChange = (event) => {
       let obj = {};
       obj[key] = event.target.value; // the key is my variable name, eg: x, y, z
       this.setState(obj)
   }

是否可以为单个处理函数提供多个输入？提前致谢

Answer 1

只要您在每个输入中设置event.target.name属性，就可以使用event.target.value和name来更新组件：

this.setState({
  [event.target.name]: event.target.value,
})

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      x: '',
      y: '',
      z: '',
    }

    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value,
    })
  }

  render() {
    return (
      <div>
        <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>
        <div>Current state: {JSON.stringify(this.state)}</div>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

在不给输入命名的情况下实现此目的的另一种方法是将状态中属性的名称绑定为更改处理程序中的参数。然后在事件处理程序中，您将收到属性的名称作为第一个参数，event作为第二个参数。这是一个例子：

class Test extends React.Component {
  state = {
    x: '',
    y: '',
    z: ''
  }
  handleChange(name, event) {
    this.setState({ [name]: event.target.value });
  }
  render() {
    return (<table>
      <tr>
        <td>
          <input value={this.state.x}
            onChange={this.handleChange.bind(this, 'x')} />
        </td>
        <td>
          <input value={this.state.y}
            onChange={this.handleChange.bind(this, 'y')} />
        </td>
        <td>
          <input value={this.state.z}
            onChange={this.handleChange.bind(this, 'z')} />
        </td>
      </tr>
    </table>);
  }
}

这种方式可能不如为输入命名，但如果由于某种原因不想在输入上有名字，它就可以工作。

Answer 3

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

如何在ReactJs中使用一个处理程序更新许多输入？

3 个答案: