Passing react text field input values as parameters to a method
How can I achieve this without storing the values in states?
I think in this case better use states
class App extends React.Component { constructor() { super(); this.state = { topicBox: null, payloadBox: null }; this.publish = this.publish.bind(this); this.handleChange = this.handleChange.bind(this); } handleChange({ target }) { this.setState({ [target.name]: target.value }); } publish() { console.log( this.state.topicBox, this.state.payloadBox ); } render() { return <div> <input type="text" name="topicBox" placeholder="Enter topic here..." value={ this.state.topicBox } onChange={ this.handleChange } /> <input type="text" name="payloadBox" placeholder="Enter payload here..." value={ this.state.payloadBox } onChange={ this.handleChange } /> <button value="Send" onClick={ this.publish }>Publish</button> </div> }}ReactDOM.render(<App />, document.getElementById('container'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="container"></div>
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 <div> <input ref="topic" type="text" name="topicBox" placeholder="Enter topic here..."/> <input ref="payload" type="text" name="payloadBox" placeholder="Enter payload here..."/> <button value="Send" onClick={this.publish}> Publish </button> </div> }}ReactDOM.render(<App />, document.getElementById('container'));Working fiddle https://jsfiddle.net/hjx3ug8a/15/
Thanks for Alexander T for his addition!