Question

我是React的新手，想知道是否可以使用单个事件处理程序来设置许多输入的状态。也就是说，我不确定如何从输入到处理程序中获取状态“键”。

import React from 'react';

class User extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.state = {
      id: props.id,
      firstName: props.firstName,
      lastName: props.lastName,
      email: props.email,
    };
  }

  // how do I (can I) use this single handler to independently change the state of multiple inputs?
  handleChange(e) {
    this.setState({ this.state.key // wrong!: this.inputRef.current.value });
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} id={`first_${this.state.id}`} value={this.state.firstName} onChange={this.handleChange.bind(this)} />
        <input type="text" ref={this.inputRef} id={`last_${this.state.id}`} value={this.state.lastName} onChange={this.handleChange.bind(this)} />
        <input type="email" ref={this.inputRef} id={`email_${this.state.id}`} value={this.state.email} onChange={this.handleChange.bind(this)} />
        // imagine ten more inputs
      </div>
    )
  }
}

Answer 1

您要尝试的操作与JS事件处理更多相关。

handleChange(event) {
      const {name, value} = event.target;

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

event.target是触发该事件的元素（按钮，文本区域，等。），您可以从中获取所需的任何属性（名称，类型，值等。）
在setState内，您必须使用类似的方法状态名称改为元素名称属性的名称。对于代码您提供的代码段可以在第一个输入中添加名称属性标签<input name = "firstName" .... />，依此类推。
同时具有不同类型的输入组合（例如，文本区域和复选框）比较棘手，您可能需要对其进行一些修改或使用条件，但现在您有了主意：）
另一件事是不要在render()方法内绑定您的处理程序，因为每次渲染时，全新的函数返回的正确绑定方法之一就是在constructor()方法内。

React-使用单个事件处理程序来设置多个输入的状态？

1 个答案: