入力タイプに対してハンドル変更イベントが機能していませんか？

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に基づいて、状態を更新する必要があります。両方で更新する必要はありません。以下の方法を試してみてください。

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

と同じ名前を割り当てます。また、私は、問題は、あなたが同じ値によってフィールドの両方を更新しているが、このように書くと思う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

を変更状態変数名としては、次のようになります。

<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

あなたはTextFieldコンポーネントは、その入力に自分のIDを渡しませんので、あなたが行うことができますので、動作しないことができるtarget.idで状態を更新材料-UI/TextFieldコンポーネントを使用しているとして、それのように、あなたのhandleChange関数に二番目のパラメータを追加することによって：

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

はそれを得た.......私がやってみたかったこと

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