onChange function in customInput from material ui

Question

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

remove ** before onChange also do you receive const {name, value}? — Hasan Haghniya
– Hasan Haghniya, Commented Oct 23, 2019 at 9:36
post the example of the question with modification in this template: codesandbox.io/s/49t79 and repost new url. — Oleg Levin
– Oleg Levin, Commented Oct 23, 2019 at 9:38

Néstor Carreño Gimeno · Accepted Answer · 2019-10-23 17:09:39Z

3

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

edited Oct 23, 2019 at 17:09

answered Oct 23, 2019 at 10:18

Néstor Carreño Gimeno

5332 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Phuong Tran Over a year ago

I try and it doesnt work at first, but it does when I change value to defaultValue. Here is my final code <CustomInput inputProps={{ defaultValue:${this.state.user.username}, name:"username", onChange: (e) => this.handleChange(e), }} />

Néstor Carreño Gimeno Over a year ago

Great! Thanks :)

Collectives™ on Stack Overflow

onChange function in customInput from material ui

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related