Reactjs 从字段数组中,可以保存输入的值?
我试图从inbit中获取值并存储它。我创建一个数组,在其中输入所选数量的“input”,然后迭代数组并输出数据。任务是将输入的值输入到所有“输入”中并保存它们。尝试使用“e.target”,解决方案没有帮助。告诉我你如何实施它Reactjs 从字段数组中,可以保存输入的值?,reactjs,Reactjs,我试图从inbit中获取值并存储它。我创建一个数组,在其中输入所选数量的“input”,然后迭代数组并输出数据。任务是将输入的值输入到所有“输入”中并保存它们。尝试使用“e.target”,解决方案没有帮助。告诉我你如何实施它 class Rules extends Component { constructor(props) { super(props); this.state = { newNameCo
class Rules extends Component {
constructor(props) {
super(props);
this.state = {
newNameColumns: [],
}
};
handleChange(value) {
let newInputColumns = []
for (let i = 0; i < value; i++) {
newInputColumns.push({
key: this.setState({count: this.state.count + 1}),
input: <Input />
});
}
this.setState({newNameColumns: [...this.state.newNameColumns, ...newInputColumns]});
}
render() {
const {newNameColumns} = this.state;
const dataTableRules =
<div className="modal-create-table">
<Input placeholder="enter title rule"/>
<Select defaultValue="0" style={{width: 220}} onChange={this.handleChange.bind(this)}>
<Option value="1">1</Option>
<Option value="2">2</Option>
<Option value="3">3</Option>
<Option value="4">4</Option>
</Select>
</div>;
return (
<div className="rules">
<TableRules/>
<Modal
newNameColumns={newNameColumns}
/>
</div>
)
}
}
类规则扩展组件{
建造师(道具){
超级(道具);
此.state={
newNameColumns:[],
}
};
handleChange(值){
让newInputColumns=[]
for(设i=0;i
{props.newNameColumns.map(项=>(
{item.input}
))}
尝试在更改处理程序中使用事件.target.value
handleChange(event) {
...
this.setState({tableAmountColumns: event.target.value});
...
}
我有一个“输入”数组,值将相互覆盖您可以包括调用handleChange的位置和组件的更多上下文吗?我更新了代码,指出了主组件和我传递props的位置。需要考虑两件事:1。我知道您可能使用的是自定义和组件,而不是普通和。如果对你来说都一样的话,你可以把它们改成香草的,或者看看自定义选择所期望的道具。当访问e.target.value 2时,香草组件工作正常。如果您解决了第1部分,那么在尝试使用setState设置newInputColumn objs上的键时可能仍然会遇到问题。这有多个问题,其中最重要的一个问题是setState不返回值。
handleChange(event) {
...
this.setState({tableAmountColumns: event.target.value});
...
}