如何在react js應用程序中添加onchange事件

Question

我是reactjs我想在我的應用程序中添加onchange 。 我正在對數據使用地圖功能。

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

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

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

Answer 2

您應該在onChange html 標記屬性中放置一個onChange函數。

例子：

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

參考

Answer 3

如果要更新依賴於組件先前狀態的組件狀態，請使用 setState 的重載版本，該版本將函數作為參數。 這是因為對 setState 函數的調用被批處理以提高性能。

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