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

Question

我是新来的反应...我在input中键入文本时手柄更改事件无法正常工作。我该如何解决这个问题？我想要处理两个inputs相同的句柄更改。

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

Answer 1

基于id，您应该更新状态，而不是同时更新它们。尝试以下方法。同时更改ID

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){
     this.setState({[e.target.id]: e.target.value});
  }
  render() {
    return (
    <div>
            <TextField hint text="First Name" id="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="last_name" floatingLabelFixed="editprofile" name="user[last_name]" onChange={this.handleChange.bind(this)} size="30" type="text" value={this.state.last_name} />
      </div>
  )}
}

Answer 2

当你使用material-ui / TextField组件更新状态时，target.id不起作用，因为TextField组件没有将你的id传递给它的输入，所以你可以通过向handleChange函数添加第二个参数来做到这一点，比如这个：

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(value, param){
     this.setState({[param]: value});
  }
  render() {
    return (
    <div>
            <TextField hint text="First Name" id="first_name" floatingLabelFixed="editprofile" onChange={(e) => this.handleChange(e.target.value, 'first_name')} name="user[first_name]" size="30" type="text" value={this.state.first_name} />
            <TextField hint text="Last Name" id="last_name" floatingLabelFixed="editprofile" name="user[last_name]" onChange={(e) => this.handleChange(e.target.value, 'last_name')} size="30" type="text" value={this.state.last_name} />
      </div>
  )}
}

Answer 3

我想，问题是你用相同的值更新两个字段，写成如下：

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

Answer 4

class Settings extends React.Component {

  constructor(props) {
    super(props)
  }

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

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