React.js 的 event.target.value 问题

Question

我正在浏览该网站上的 React.js 文档，并遇到了令我困惑的代码。

据我了解，isGoing 复选框的预填充状态将为 true（因此已选中），而 numberOfGuests 为 2。

我感到困惑的部分是handleInputChange()函数，它将变量 target设置为等于event.target——它是一个预构建的属性，返回触发事件的DOM元素。value变量允许 target.name 检索名称并将其分配给 target.checked 作为真值，将 target.value 作为假值。 “target.checked”检索 isOnGoing 的当前状态，当前状态为布尔值 true，但是“target.value”检索什么？有人可以向我解释那部分吗？

另外，只是为了确保我正确理解这一点：变量名称是否等于event.target.name还是我理解错误？

感谢您的帮助。

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

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

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

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

Answer 1

问题1

我感到困惑的部分是handleInputChange()函数，它将变量target设置为等于event.target——它是一个预构建的属性，返回触发事件的DOM元素。value 变量允许 target.name 检索名称并将其分配给 target.checked 作为真值，将 target.value 作为假值。“target.checked”检索 isOnGoing 的当前状态，当前状态为布尔值 true，但是“target.value”检索什么？

答案1

React 使用合成事件，这些事件会快速返回到事件池以供重用，因此通常会保存或解构事件对象以保存到状态中，这本质上也是异步的，即状态更新不会立即发生，并且状态更新不会立即发生。在处理状态更新之前，事件对象可以被取消并返回到事件池。

handleInputChange(event) {
  // save the target object for future reference
  const target = event.target;

  // Check if the target is the checkbox or text input to save the value
  const value = target.name === 'isGoing' ? target.checked : target.value;

  // Save the input name, i.e. name = state object
  const name = target.name;

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

这是如何运作的

处理程序正在访问输入的名称和检查/值，因此通过为状态中使用的输入提供相同的名称，处理程序可以动态地将正确的值保存到正确的状态属性。

IE 如果复选框已切换，则目标名称为"isGoing"且值为目标选中值，true或false。setState解决类似的问题

this.setState({ isGoing: true });

更常见或更通用的处理程序是检查类型，而不是正确访问检查的属性或正常值属性。

handleInputChange(event) {
  // Destructure type, checked, name, and value from event.target
  const { type, checked, name, value } = event.target;
  this.setState({ [name]: type === 'checkbox' ? checked : value });
}

但是“target.value”检索什么？

一般来说，在这种情况下，它只是访问用作回调target.value的潜在任何输入的字段。handleInputChange在这种特定情况下，它将是输入的值"numberOfGuests"。

问题2

另外，只是为了确保我正确理解这一点：变量名称是否等于 event.target.name 还是我理解错误？

答案2

是的，const name = target.name;只是将事件的目标名称保存到名为 的变量中name。同样，const { name } = target是等价的。