Есть 2 взаимосвязанных инпута. Как сделать так, чтобы когда в первый начинал вводить слово, то снизу появлялось 2 таких же инпута, но уже пустые. И так далее.
2
-
у вас только React, или какая-то реализация Flux-архитектуры?– Sergiks20 мар 2016 в 22:06
-
@Sergiks , только React– Mrk21 мар 2016 в 5:08
Добавить комментарий
|
1 ответ
Если навскидку, то получилось вот что:
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')
);