javascript - Handle change event not working for input types? - Stack Overflow

admin管理员组

文章数量:1389779

I am new to react… my handle change event is not working while typing text into an input. How do I go about fixing that? I want to handle both inputs with the same handle change.

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

I am new to react… my handle change event is not working while typing text into an input. How do I go about fixing that? I want to handle both inputs with the same handle change.

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

• javascript
• reactjs

Share Improve this question Follow edited Aug 7, 2017 at 17:29 Jerry Stratton 3,49111 gold badge2626 silver badges3232 bronze badges asked Apr 3, 2017 at 11:14 AshhAshh 46.6k1616 gold badges111111 silver badges137137 bronze badges 2

• What exactly not working? – Andrii Starusiev Commented Apr 3, 2017 at 11:21
• while i am typing the text .... there is nothing showing in input boxes – Ashh Commented Apr 3, 2017 at 11:22

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Based on id you should update the state and not both on them together. Try the below method. Also change the 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>
  )}
}

as you're using material-ui/TextField ponent updating state by target.id can't work, because TextField ponent doesn't pass your id to its input, so you can do it by adding second parameter to your handleChange function, like this:

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

I think, issue is you are updating both the fields by the same value, write it like this:

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

And assign the same name as the state variable names, like this:

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

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

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

本文标签： javascriptHandle change event not working for input typesStack Overflow