[英]how to add new input field after click plus icon in React Js
我想每次单击加号图标时都添加一个新输入,但它总是将其添加到末尾。 我希望将其添加到单击的项目旁边。
这是我使用过的React代码。
const Input = props => ( <div className="answer-choice"> <input type="text" className="form-control" name={props.index} /> <div className="answer-choice-action"> <i onClick={props.addInput}>add</i> <i>Remove</i> </div> </div> ); class TodoApp extends React.Component { constructor(props) { super(props); this.state = { choices: [Input] }; } addInput = index => { this.setState(prevState => ({ choices: update(prevState.choices, { $splice: [[index, 0, Input]] }) })); }; render() { return ( <div> {this.state.choices.map((Element, index) => { return ( <Element key={index} addInput={() => { this.addInput(index); }} index={index} /> ); })} </div> ); } } ReactDOM.render(<TodoApp />, document.querySelector("#app"));
<div id="app"></div> <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>
我必须承认这会使我陷入困境,但是反应如何处理key
道具存在问题。 当您使用索引作为键时,它将不起作用。 但是,如果您确保即使列表更改 , 输入也将始终被分配相同的键 ,它将按预期工作:
const Input = props => (
<div className="answer-choice">
<input type="text" className="form-control" name={props.index} />
<div className="answer-choice-action">
<i onClick={props.addInput}>add </i>
<i>Remove</i>
</div>
</div>
);
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
choices: [],
nrOfElements: 0
};
}
addInput = index => {
this.setState(prevState => {
const choicesCopy = [...prevState.choices];
choicesCopy.splice(index, 0, `input_${prevState.nrOfElements}`);
return {
choices: choicesCopy,
nrOfElements: prevState.nrOfElements + 1
};
});
};
componentDidMount() {
this.addInput(0);
}
render() {
return (
<div>
{this.state.choices.map((name, index) => {
return (
<Input
key={name}
addInput={() => {
this.addInput(index);
}}
index={index}
/>
);
})}
</div>
);
}
}
来自文档的一些参考:
应该为数组内部的元素赋予键,以使元素具有稳定的身份 ... ... 如果项目的顺序可能改变,我们不建议对键使用索引 。 这可能会对性能产生负面影响,并可能导致组件状态出现问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.