时间戳

首页 > 解决方案 > 如何将事件添加到输入反应

reactjs - 如何将事件添加到输入反应

问题描述

我正在使用 react 创建一个具有可拖动行的表。
这些行具有更改其道具的输入。
当我使用时，onChange={this.onchange(this.value)}我收到以下错误：

警告：失败的道具类型：React.PropTypes 类型检查代码在生产中被剥离。

我应该能够onChange在元素上使用该功能吗？
我也收到了一个警告，告诉我是这样的。

您在value没有处理程序的情况下为表单字段提供了道具onChange。这将呈现一个只读字段。

我的完整代码可以在这个链接中找到： 我的代码

这是对输入没有 onchange 事件的代码，因此您可以看到结果。
我想将 onchange 事件添加到输入字段并更改 JSON 中的值。

标签： reactjsdom-events

解决方案

您在输入上使用了 value 道具，但没有给它一种实际处理更改的方法。

在您的输入中，添加一个onChange处理程序，但不要调用它。

<input type="text" value={props.caption} onChange={this.handleChange}/>

该handleChange函数应如下所示：

handleChange = (e) => this.setState({something: e.target.value})

它将事件作为参数，您可以使用e.target.value;访问输入的值。然后使用新值更新状态，该值应绑定到输入的value道具。这称为受控组件，您可以在其中处理 React 中的更改。

您可以在此处阅读有关受控组件与非受控组件的更多信息：https ://reactjs.org/docs/uncontrolled-components.html

推荐阅读