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?

Answer 1

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.