Passing react text field input values as parameters to a method

Question

I have the below input fields of which I need to get the entered inputs and pass it to the onClick event of the button shown below.

Answer 1

You can add ref for each text field, and read the value from it like:

class App extends React.Component {
  constructor() {
    super();
    this.publish = this.publish.bind(this);
  }

  publish(topicBox, payloadBox) {
    alert(this.refs.topic.value);
    alert(this.refs.payload.value);
  }

  render() {
    return 

      

      

       
        Publish
      
    
  }
}

ReactDOM.render(, document.getElementById('container'));

Working fiddle https://jsfiddle.net/hjx3ug8a/15/

Thanks for Alexander T for his addition!