onChange function in customInput from material ui

user_12255915 0
Viewed 1182

I am using a template that build on material ui. I try to put onChange in this code but it doesnt work. I also try to add onChange in customInput too but still doesnt work. I am think to put onChang inside inputProps but I have no idea how to put function in object. 

handleChange = e => {
    const {name, value} = e.currentTarget;
    this.setState({[name]: value});
};
......
<CustomInput
                             labelText="Username"
                             id="username"
                             name='username'
                             **onChange = {e =>this.handleChange(e)}
                             formControlProps={{
                               fullWidth: true
                             }}
                             inputProps={{                              
                              value: `${this.state.user.username}`, 
                            }}
                           />

How can I fix this problem?Thanks

material-ui reactjs
1 Answers

A sample on how to use onChange:

<CustomInput
    id="pass"
    formControlProps={{
        fullWidth: true
    }}
    inputProps={{
        onChange: (event) => this.handleChange(event),
        placeholder: "Password",
        type: "password"
    }}
 />

Here is the source of the sample, as well as a discussion on how to use the onChange event.

Finally, assuming that all the rest of your code works, this is (kind of) what you need:

handleChange = e => {
    const {name, value} = e.currentTarget;
    this.setState({[name]: value});
};
......
<CustomInput
    labelText="Username"
    id="username"
    name='username'
    formControlProps={{
        fullWidth: true
    }}
    inputProps={{   
        onChange: (e) => this.handleChange(e),                           
        defaultValue: `${this.state.user.username}`
    }}
/>
user_119941220
Related