Question

我有一个输入数字值，我试图发送给我的clickHandler，但是做错了事...

点击后，我想将值“ this.state.NumberHolder”发送给处理程序

<input value={this.state.NumberHolder} onClick={this.clickHandler} type="number" />

做一个console.log我可以看到我的clickHandler被调用了，但是我没有得到更新的状态值

clickHandler = (target) => {
  console.log("targetHere", target);
  this.setState({
    NumberHolder: target.value
  });
};

Answer 1

实际上，默认情况下，您收到的属性是事件的上下文。

因此，要正确处理输入标签的值，您需要执行以下操作：

clickHandler = (event) => {
  console.log("targetHere", event.target);
  this.setState({
    NumberHolder: event.target.value
  });
};

您的JSX有一个大问题，onClick在单击输入时执行，而不更改。因此，您将永远不会收到新的输入值。 用于更改：

<input value={this.state.NumberHolder} onChange={this.clickHandler} type="number" />

这应该很好地工作。选中this fiddle，以查看其正常工作。

Answer 2

我相信应该是这样的：

// destructure target from the event object by wrapping it in braces
clickHandler = ({target}) => {
  console.log("targetHere", target);
  this.setState({
    NumberHolder: target.value
  });
};

但是您的代码存在更大的问题。由于您输入的值始终是this.state.NumberHolder，因此您只需一次又一次地设置相同的值即可。

如果您要在click事件上发送特定值，则可以将click事件转换为如下所示的函数：

// pass in number as first argument to function that returns another anonymous function
clickHandler = (NumberHolder) => () =>{
  this.setState({ NumberHolder });
};

然后在带有click事件的元素上，像这样传递onClick：

<input onClick={this.clickHandler(3)} />

这将在函数范围内传递参数，并允许您访问它。

Answer 3

考虑到您的评论，我相信您想在input更改时添加事件并记录输入的值，如下所示：

<input value={this.state.NumberHolder} onChange={this.clickHandler} type="number" />

clickHandler = (target) => {
  console.log("target Value", target.value);
  this.setState({
    NumberHolder: target.value
  });
};

将输入值发送到React中的点击处理程序

3 个答案: