React: Checkbox and file on controlled forms

Question

For inputs with type text it's easy, with onChange() I update the state calling setState() and showing the state on the input through its value attribute. However, for checkboxes and even more for file, I'm totally lost.

Which would be the:

handler
property of the event object
attribute ... for input>checkbox and input>file

Example of input>text

onChange()
event.target.value
value

Yash Thakur · Accepted Answer · 2018-04-16 15:02:05Z

1

For checkbox you can check using using the following :

handleChange(e) {
  console.log(e.target.checked);
}
<input 
  type="checkbox" 
  name="checkbox"
  onChange={ this.handleChange } 
/>

For files you can go as follows:

handleUploadFile(e) {
  let selectedFile = e.target.files;
  //if single file
  console.log(selectedFile[0]);
  //else loop around the files
  ...
}

answered Apr 16, 2018 at 15:02

Yash Thakur

1,2018 silver badges14 bronze badges

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

2 Comments

Peter Over a year ago

Thanks, @yash-thakur So, we don´t set the state and assign a value for x-attribute of that element...? Example: <input type="checkbox" checked={this.state.checkedState} onChange={(e) => this.handleChange(e.target.checked)} /> Thanks again!

Yash Thakur Over a year ago

You can setState int the handleChange function and used that state as per what you mentioned in your above comment.

Collectives™ on Stack Overflow

React: Checkbox and file on controlled forms

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