How to access checked elements in ReactJS?

Question

I've got a todo list. Which is structured in the following matter - Main > List > listItem (Main is the parent of List and so on).

Now, each listItem has a checkbox that the user can mark. After marking several items, the user can click on "Remove Marked Items" (Let's call it multiRemove) and I want my app to go over the marked listItems and remove the relevant items.

One of my solutions is to have a list of items in the Main component and each interaction with the UI would change the list accordingly.

Would it be possible to achieve this in another way?

** Note: ** I'm not using FLUX (or its implementations).

Thank you very much.

And you haven't attached your code to the question why?

Etheryte
– Etheryte

2015-08-30 10:29:40 +00:00
Commented Aug 30, 2015 at 10:29 — Etheryte
– Etheryte, Commented Aug 30, 2015 at 10:29
Cause it's conceptual question.... No need for code.

alexunder
– alexunder

2015-08-30 10:35:20 +00:00
Commented Aug 30, 2015 at 10:35 — alexunder
– alexunder, Commented Aug 30, 2015 at 10:35

kaushik94 · Accepted Answer · 2015-08-30 21:32:01Z

2

This might help. https://facebook.github.io/react/docs/two-way-binding-helpers.html

var FieldCheckbox = React.createClass({
getInitialState: function(){
    var checked = true;
    return {isChecked: checked};
},
check: function(elementId, event){
    var checked = true;
    if(this.state.isChecked){
        // Apply your logic
        checked = false
    }
    else{
        // Something else
    }
    this.setState({isChecked: checked});
},
render: function() {
    return(
        <label>
            <Input type='checkbox' checked={this.state.isChecked} onClick={this.check.bind(null, this.props._type)} label={this.props._type} />
        </label>
    );
}
});

This is to keep the checkbox true by default. The reason I had to write the onClick logic myself is because, I have tried it with react and it doesn't un-tick. I did it the other way round, things were smooth.

answered Aug 30, 2015 at 21:32

kaushik94

6876 silver badges18 bronze badges

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

1 Comment

alexunder Over a year ago

Eventually I did something similar. But I haven't used "checked" attr in the <Input>. Once I have the state, I can access the relevant element.

Clarkie · Accepted Answer · 2015-08-30 16:40:28Z

1

A good rule of thumb is to keep as few components holding application state as possible. Most of your components should be 'dumb'. You can pass through the state of the checkboxes and any handlers as props.

edited Aug 30, 2015 at 16:40

answered Aug 30, 2015 at 16:32

Clarkie

7,5709 gold badges41 silver badges53 bronze badges

Comments

Matias Faure · Accepted Answer · 2015-08-30 16:30:45Z

0

You can add a handler to the checkboxes that will save the result isChecked in the components state. Then your list component can visit every of its children's states to see if it's going to be removed or not.

answered Aug 30, 2015 at 16:30

Matias Faure

8421 gold badge10 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to access checked elements in ReactJS?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related