Javascript 处理更改事件不适用于输入类型？

我是一个新手，在

输入中键入文本时，我的句柄更改事件不起作用。我该如何着手解决这个问题？我想用相同的句柄更改来处理两个
输入

import React from 'react'
import TextField from 'material-ui/TextField'
class Settings extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            first_name:'',
            last_name:''
        }
    }
    handleChange(e){
        var first_name = e.target.first_name
        var last_name = e.target.last_name
        var state = this.state
        state[first_name] = e.target.value
        state[last_name] = e.target.value
        this.setState(state)
    }
    render() {
        return (
          <div>
              <TextField hint text="First Name" id="user_first_name" floatingLabelFixed="editprofile" onChange={this.handleChange.bind(this)} name="user[first_name]" size="30" type="text" value={this.state.first_name} />
              <TextField hint text="Last Name" id="user_last_name" floatingLabelFixed="editprofile" name="user[last_name]" onChange={this.handleChange.bind(this)} size="30" type="text" value={this.state.last_name} />
          </div>
        )
    }
}

从“React”导入React
从“物料界面/文本字段”导入文本字段
类设置扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
名字：''，
姓氏：“”
}
}
手变（e）{
var first\u name=e.target.first\u name
var last_name=e.target.last_name
var state=this.state
状态[名字]=e.target.value
状态[姓氏]=e.target.value
this.setState（状态）
}
render（）{
返回(
)
}
}
根据id，您应该更新状态，而不是同时更新状态。试试下面的方法。还要更改ID


从“React”导入React
从“物料界面/文本字段”导入文本字段
类设置扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
名字：''，
姓氏：“”
}
}
手变（e）{
this.setState（{[e.target.id]：e.target.value}）；
}
render（）{
返回(
)}
}
我认为，问题是您正在用相同的值更新两个字段，请这样写：

handleChange(e){
    var obj = {}
    obj[e.target.name] = e.target.value
    this.setState(obj);
}

<TextField ... name='first_name' value={this.state.first_name} onChange={this.handleChange.bind(this)}/>
<TextField ... name='last_name' value={this.state.last_name} onChange={this.handleChange.bind(this)}   />

并指定与状态变量名称相同的名称，如下所示：

handleChange(e){
    var obj = {}
    obj[e.target.name] = e.target.value
    this.setState(obj);
}

<TextField ... name='first_name' value={this.state.first_name} onChange={this.handleChange.bind(this)}/>
<TextField ... name='last_name' value={this.state.last_name} onChange={this.handleChange.bind(this)}   />



使用以下命令：

class Settings extends React.Component {

  constructor(props) {
    super(props)
     this.state = {
      first_name:'',
      last_name:''
    }
  }

  handleChange(e){
    let obj = {};
    obj[e.target.name] = e.target.value;
    this.setState(obj);
  }

  render() {
    return (
      <div>
        <TextField hintText="First Name" id="first_name" floatingLabelFixed="editprofile" onChange={this.handleChange.bind(this)} name="first_name" size="30" type="text" value={this.state.first_name} />
        <TextField hinText="Last Name" id="last_name" floatingLabelFixed="editprofile" name="last_name" onChange={this.handleChange.bind(this)} size="30" type="text" value={this.state.last_name} />
      </div>
  )}
}

类设置扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
名字：''，
姓氏：“”
}
}
手变（e）{
设obj={}；
obj[e.target.name]=e.target.value；
此设置状态（obj）；
}
render（）{
返回(
)}
}
当您使用material ui/TextField component按target.id更新状态时，无法工作，因为TextField component不会将您的id传递给其输入，因此您可以通过向handleChange函数添加第二个参数来完成，如下所示：


从“React”导入React
从“物料界面/文本字段”导入文本字段
类设置扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
名字：''，
姓氏：“”
}
}
handleChange（值，参数）{
this.setState（{[param]：value}）；
}
render（）{
返回(
this.handleChange（e.target.value，'first_name'）}name=“user[first_name]”size=“30”type=“text”value={this.state.first_name}/>
this.handleChange（e.target.value，'last_name'）}size=“30”type=“text”value={this.state.last_name}/>
)}
}
类设置扩展React.Component{
建造师（道具）{
超级（道具）
}
handleChange=（e）=>{
常量{name，value}=e.target；
this.setState（{[name]=value}）；
}
render（）{
返回(
)}
}
什么东西不起作用？当我输入文本时。。。。输入中没有显示任何内容boxes@AshishChoudhary检查更新后的答案，使用此选项可以分别更新这两个字段：）请为您的答案添加一些解释。