There are 2 interconnected inputs. How to make it so that when you start to enter a word in the first one, then 2 of the same inputs appear in the bottom, but already empty. And so on.

  • Do you have only React, or some implementation of the Flux-architecture? - Sergiks
  • @Sergiks, only React - Mrk

1 answer 1

If offhand, it turned out this:

var Inputs = React.createClass({ render: function() { return <div> <input type="text" onChange={this.props.onChange}/> <input type="text"/> </div> } }); var App = React.createClass({ getInitialState: function() { return { numOfInputs: 1 }; }, addInputs: function() { this.setState({ numOfInputs: this.state.numOfInputs + 1 }); }, render: function() { var nodes = []; for (var i = 0; i < this.state.numOfInputs; i++) { if (i+1 === this.state.numOfInputs) { nodes.push(<Inputs key={i} onChange={this.addInputs}/>) } else { nodes.push(<Inputs key={i}/>); } } return <div> {nodes} </div> } }); React.render( <App/>, document.getElementById('container') );

http://codepen.io/anon/pen/oxZqwQ

  • If you do not like JSX, then the link in Codepen will see pure JS. - iliaznk