Handle Change Event funktioniert nicht für Eingabearten?

Question

Ich bin neu zu reagieren ... mein Handle Change Event funktioniert nicht, während Sie Text in eine input eingeben. Wie gehe ich daran, das zu beheben? Ich möchte beide inputs mit dem gleichen Griff ändern behandeln.

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

Basierend auf ID sollten Sie den Status und nicht beide auf ihnen zusammen aktualisieren. Versuchen Sie die folgende Methode. Ändern Sie auch die 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

Ich denke, die Ausgabe wird Ihnen sowohl die Felder um den gleichen Wert aktualisieren, schreiben Sie es wie folgt aus:

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

, und weisen den gleichen Namen als die Zustandsvariablen Namen, wie folgt:

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

verwenden:

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

wie Sie Material-ui/Textfield-Komponente verwenden Zustand durch target.id Aktualisierung kann nicht funktionieren, weil TextField- Komponente nicht Ihre ID an seinem Eingang nicht besteht, so dass Sie tun können, es durch den zweiten Parameter auf Ihre handleChange Funktion hinzufügen, wie folgt aus:

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

es bekam ....... ich wollte tun, dass

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