Javascript 带有React.js的event.target.value问题

我正在浏览关于React.js的文档，遇到了一些让我感到困惑的代码

据我所知，IsGong复选框的预填充状态将为true（因此选中），而numberOfGuests为2

我感到困惑的部分是handleInputChange（）函数，它将变量target设置为等于event.target-它是一个预构建的属性，返回触发事件的DOM元素。值变量允许target.name检索名称，并将其指定给target.checked作为truthy，target.value作为falsy。“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>
    );
  }
}

类保留扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
是的，
宾客人数：2
};
this.handleInputChange=this.handleInputChange.bind（this）；
}
handleInputChange（事件）{
const target=event.target；
const value=target.name==‘正在进行’？target.checked:target.value；
const name=target.name；
这是我的国家({
[名称]：值
});
}
render（）{
返回(
将要：


嘉宾人数：
);
}
}

代码正在为使用两种输入类型的表单创建动态changeHandler：number和checked。文本/数字输入具有值属性，而选中输入具有选中属性。因此，三元语句用于在target.name与唯一复选框输入（“IsGong”）的名称匹配时返回target.checked，或返回所有其他输入的target.value（在本例中仅返回“numberOfGuests”）

继续使用动态概念，出于可读性目的，变量名实际上等同于target.name（它将target.name缩短为name，就像target.name缩短e.target.name一样）。然后，名称作为属性键传递，以在状态内更新。因此，如果输入的名称是“numberOfGuests”，并且存在一个名为“numberOfGuests”的状态属性，那么该状态属性将得到更新。如果不存在状态属性，react将只在状态中创建一个新属性

总的来说，我们的目标是创建1个onChange事件处理程序，它可以用于所有输入和任何状态属性，而不是为每个输入提供其唯一的处理程序。

Question 1 我感到困惑的是handleInputChange（）函数 将变量目标设置为event.target-它是一个预构建的 属性，该属性返回触发事件的DOM元素。这个 值变量，允许target.name检索名称和 将其指定给target.checked作为truthy，target.value作为falsy。 “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
  });
}

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

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

即，如果选中复选框，则目标名称为

“IsGong”

，值为目标选中值，

true

或

false

。

setState

解析为类似于

this.setState({ isGoing: true });

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

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”检索到什么呢

通常，在这种情况下，它只是访问使用

handleInputChange

作为回调的任何输入的

target.value

字段。在这种特定情况下，它将是

“numberOfGuests”

输入的值

问题2 另外，为了确保我正确理解这一点：是 变量名等于event.target.name还是我能理解 不正确

答复2 是，

const name=target.name

只是将事件的目标名称保存到名为

name

的变量中。类似地，

const{name}=target

是等效的

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