處理更改事件不適用於輸入類型？

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你應該更新狀態，而不是兩個在一起。嘗試下面的方法。也改變了IDS

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

我認爲，問題是你用相同的值更新兩個領域，它這樣寫：

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 3

爲你使用材料的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 4

得到它.......我想這樣做

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