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.

<input type="text" style={textFieldStyle} name="topicBox" placeholder="Enter topic here..."/>
<input type="text" style = {textFieldStyle} name="payloadBox" placeholder="Enter payload here..."/>
<button value="Send" style={ buttonStyle } onClick={this.publish.bind(this,<value of input field 1>,<value of input field2>)}>Publish</button><span/>

I have a method called publish which takes two string arguments. In place of those strings, I need to pass the values entered in the input fields. How can I achieve this without storing the values in states? I do not want to store the input field values in state variables. Any help would be much appreciated.

Oleksandr T. · Accepted Answer · 2016-09-28 11:40:05Z

22

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>

edited Sep 28, 2016 at 11:40

answered Sep 27, 2016 at 11:32

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

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

1 Comment

César Landesa Over a year ago

I think that this is the best way to do it. I would avoid using refs

Muhammad Hamada · Accepted Answer · 2018-02-14 16:41:39Z

7

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!

edited Feb 14, 2018 at 16:41

answered Sep 27, 2016 at 11:34

Muhammad Hamada

7255 silver badges13 bronze badges

4 Comments

AnOldSoul Over a year ago

I get the following error when I use refs. ERROR in ./src/components/Sender.tsx (126,102): error TS2339: Property 'topic' does not exist on type '{ [key: string]: Component<any, any> | Element; }'.

Muhammad Hamada Over a year ago

It should work, add the whole script to see where is the problem.

Oleksandr T. Over a year ago

@Muhammad Aref pass .bind(this) to onClick is not good practice, you should .bind include constructor - github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/…

Oleksandr T. Over a year ago

@Muhammad Aref why do you use variables inside function signature publish(topicBox, payloadBox) { ?

Collectives™ on Stack Overflow

Passing react text field input values as parameters to a method

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related