Reactjs 从字段数组中,可以保存输入的值?

Reactjs 从字段数组中,可以保存输入的值?,reactjs,Reactjs,我试图从inbit中获取值并存储它。我创建一个数组,在其中输入所选数量的“input”,然后迭代数组并输出数据。任务是将输入的值输入到所有“输入”中并保存它们。尝试使用“e.target”,解决方案没有帮助。告诉我你如何实施它 class Rules extends Component { constructor(props) { super(props); this.state = { newNameCo

我试图从inbit中获取值并存储它。我创建一个数组,在其中输入所选数量的“input”,然后迭代数组并输出数据。任务是将输入的值输入到所有“输入”中并保存它们。尝试使用“e.target”,解决方案没有帮助。告诉我你如何实施它

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});

   ...
}