React.js get checked inputs

Question

I am quiet new to React and I wasn't able to figure out how to manipulate DOM.
I have a set of components with checkboxes, and I have a delete button, I want to delete the checked elements when delete button is clicked.
here is a snippet of code I am using :

 ...
 deleteMessage: function(event) {
    this.refs.select_message.getDOMNode(); // I get only the last element
 },
 ...


 ...
 render: function() {
    var Messages = this.props.messages;
    return (
         <div>
            <button onClick={this.deleteMessage}>Delete</button>

        {Messages.map(function(message) {
              return (
                  <div>
                    <input type='checkbox' className='select_message' ref='select_message'/>
                  </div>
                );
        })}
      </div>
    );

Am I doing it the right way?

ustun · Accepted Answer · 2014-03-31 12:51:24Z

4

What you should do is, in your deleteMessage, call a handler which you have passed from the parent. That, in turn, modifies the messages array from the outside. Then the new messages array will be passed in as props. The main insight you need is props are not only data passed for rendering, but also functions to be called when user interaction happens inside the component.

answered Mar 31, 2014 at 12:51

ustun

7,1115 gold badges46 silver badges58 bronze badges

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

Collectives™ on Stack Overflow

React.js get checked inputs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related