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

因为你使用的材料-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>
  )}
}

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

4 个答案: