Get value from input and use on the button

Question

I'am creating component with input element and button element. I need to get the input value and use with button, for example. How can I do that? Here's my code:

var InputSearch = React.createClass({ getInitialState: function() { return { value: 'pics' } }, handleChange: function() { this.setState({ value: event.target.value }); }, render: function() { return ( <input type="text" value={this.state.value} onChange={this.handleChange} /> ) } }); var ButtonSearch = React.createClass({ handleClick: function(event) { console.log(this.state.value); // here's go the input value }, render: function() { return ( <button onClick={this.handleClick}>GO! </button> ) } }); var Search = React.createClass({ render: function() { return ( <div> <InputSearch /> <ButtonSearch /> </div> ) } }); React.render( <Search />, document.getElementById('result') );

Is there a specific reason why you would have the input and button as two separate components? If you club them in a single component, you could get the value as both would be part of the same component. — shashi
– shashi, Commented Sep 24, 2015 at 21:31

danbahrami · Accepted Answer · 2015-09-25 06:29:31Z

One issue here is that you are breaking a good rule - separate smart and dumb components. https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

The way to do this is to have a parent component that holds all the state and functionality of the children and passes all of this down as props...

//Our smart parent var SearchContainer = React.createClass({ getInitialState : function() { return { value : 'pics' } }, handleInput : function(event) { this.setState({value: event.target.value}); }, render : function() { return ( <div> <InputSearch value={this.state.value} onChange={this.handleInput} /> <ButtonSearch value={this.state.value} /> </div> ) } }); //Our dumb children var InputSearch = React.createClass({ propTypes : { onChange : React.PropTypes.func.isRequired, value : React.PropTypes.string }, render : function() { return ( <input type="text" value={this.props.value} onChange={this.props.onChange} /> ) } }); var ButtonSearch = React.createClass({ propTypes : { value : React.PropTypes.string }, handleClick : function() { console.log(this.props.value); //log value }, render : function() { return ( <button onClick={this.handleClick}>GO! </button> ) } }); React.render(<Search />, document.getElementById('result'));

Here we pass the handler function down from parent to child so the input doesn't care what happens to the event it fires on change, it just needs to know that it has a prop called onChange that's a function and it invokes that.

The parent (SearchContainer) handles all of that functionality and passes the changed state down to both the button and the input...

hope that helps

Dan

J. Mark Stevens · Accepted Answer · 2015-09-24 21:44:12Z

You left out the event in your handleChange.

handleChange: function(event) { this.setState({ value: event.target.value }); },

noa-dev · Accepted Answer · 2015-09-25 06:53:25Z

The main architecture of react is the Parent Child / Master Slave principle.

If you want to pass values between components you have to create relations between.

Like for example

You create your master Component with few default states.

var MyMasterComponent = React.createClass({ getInitialState: function(){ ... }, render: function(){ return( <ChilComponent1 textiwanttopass={this.state.text} /> ); } });

With that method you are calling the render of another component within a master component. That way you can pass values from states into another component.

In that case you can access the passed text with this.props.textiwanttopass

Collectives™ on Stack Overflow

Get value from input and use on the button

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related