如何在 React js 应用程序中添加 onchange 事件答案

【问题标题】：how to add onchange event in react js application如何在 React js 应用程序中添加 onchange 事件
【发布时间】：2019-12-16 06:47:15
【问题描述】：

我是reactjs 的新手，我想在我的应用程序中添加onchange。我正在使用地图功能来获取数据。

onChange = (event,k,i) => {
     this.setState({

      dList: update(this.state.dList[k][i], {
        [event.target.name]:
          {$set: event.target.value} 
      })
    })
  }

【问题讨论】：

你想在哪里添加onChange事件？
this.onChange(event,i,1)} //onChange={this.onChange (i,1)} isEditable={this.state.isEditable} 透明 />
我想添加onChange事件表来编辑数据来自url到我的表

标签： javascript node.js reactjs

【解决方案1】：

陈述例子

state = {
    name:'',
    password:''
}

如果您有多个示例名称和密码输入

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

<input type="password" name="password" value={password} onChange={this.handleChange} />

这就是你应用 onchange 处理程序的方式

handleChange = e => {
    this.setState({[e.target.name]: e.target.value})
}

【讨论】：

【解决方案2】：

您应该将onChange 函数放在onChange html 标记属性中。

例子：

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

Reference

【讨论】：

我在我的 react 应用程序中使用语义 ui react。这是我的输入标签 this.onChange (event,i,1)} isEditable={this.state.isEditable} 透明 />
@PiyushPandey 这里是map 和onChange stackoverflow.com/questions/50945554/… 的示例

【解决方案3】：

如果你想更新依赖于组件先前状态的组件状态，请使用以函数为参数的 setState 的重载版本。这是因为对 setState 函数的调用被批处理以提高性能。

onChange = (event,k,i) => {
     this.setState(prevState => {
      dList: update(prevState.dList[k][i], {
        [event.target.name]:
          {$set: event.target.value} 
      })
    })
}

【讨论】：

当我使用 onchange 方法时，我给出了错误 =>TypeError：无法在字符串“C”上创建属性“状态”。这里状态是输入中的名称，c 是来自 url 到我的表的值