Javascript React-通过数组迭代呈现状态来处理输入的更改

这是我的密码

    class Module extends Component {
        constructor() {
            super()

            this.state = {
                inputs: [
                    { type: 'text', placeholder: 'placeholder text', name: 'text1', id: 'text1', value: 'aaa' },
                    { type: 'text', placeholder: 'another placeholder text', name: 'text2', id: 'text2', value: '' },
                    { type: 'text', placeholder: 'third placeholder text', name: 'text3', id: 'text3', value: '' },
                ]
            }

            this.handleInputChange = this.handleInputChange.bind(this)
            this.saveModule = this.saveModule.bind(this)
        }

        handleInputChange(event) {
            this.setState ({
                [event.target.name]: event.target.value
            })
        }

        renderInput = (input) => {
            return(
                <div key={ input.id }>
                    <input
                        type={ input.type }
                        name={ input.name }
                        placeholder={ input.placeholder }
                        onBlur={ this.saveModule }
                        value={ input.value }
                        onChange={ this.handleInputChange }
                    />
                </div>
            )
        }

        render() {
            return (
                <div>
                    { this.state.inputs.map(this.renderInput) }
                </div>
            )
        }
    }

    export default Module

类模块扩展组件{
构造函数（）{
超级（）
此.state={
投入：[
{type:'text'，placeholder:'placeholder text'，name:'text1'，id:'text1'，value:'aaa'}，
{类型：'text'，占位符：'other placeholder text'，名称：'text2'，id:'text2'，值：''}，
{类型：'text'，占位符：'third placeholder text'，名称：'text3'，id:'text3'，值：''}，
]
}
this.handleInputChange=this.handleInputChange.bind（this）
this.saveModule=this.saveModule.bind（this）
}
handleInputChange（事件）{
这是我的国家({
[event.target.name]：event.target.value
})
}
renderInput=（输入）=>{
返回(
)
}
render（）{
返回(
{this.state.inputs.map（this.renderInput）}
)
}
}
导出默认模块

我如何处理输入的更改，以这种方式从状态呈现哪个值？！ 如果我有{this.state.input.value}它工作得非常好，一旦我像这样重构它，setState似乎再也达不到它了

有什么想法吗？：）

---

提前多谢

由于要直接在创建

input

元素的

input数组中进行更改，因此需要在
onChange
方法中进行更改。使用任何唯一属性如名称或索引来标识已更改的元素，迭代
输入数组
找到该输入元素，然后更新该元素的值。更新输入数组中的值后，也更新状态输入数组，当
react
重新渲染组件时，值将自动反映在
UI
中

检查工作代码：


类模块扩展React.Component{
构造函数（）{
超级（）
此.state={
投入：[
{type:'text'，placeholder:'placeholder text'，name:'text1'，id:'text1'，value:'aaa'}，
{类型：'text'，占位符：'other placeholder text'，名称：'text2'，id:'text2'，值：''}，
{类型：'text'，占位符：'third placeholder text'，名称：'text3'，id:'text3'，值：''}，
]
}
this.handleInputChange=this.handleInputChange.bind（this）
}
handleInputChange（事件）{
让inputs=this.state.inputs.slice（）；
for（让我输入）{
if（输入[i].name==event.target.name）{
输入[i].value=event.target.value；
this.setState（{inputs}）；
打破
}
}
}
renderInput=（输入，i）=>{
返回(
)
}
render（）{
返回(
{this.state.inputs.map（this.renderInput）}
)
}
}
ReactDOM.render（，document.getElementById（'app'））
您必须先创建一个新状态来设置状态

由于
此.state
是不可变的，因此只需使用or命令修改旧状态即可创建新状态

对于如何以不变的方式更改javascript对象，是一个很好的参考。还有一个专门用于创建和修改不可变对象的库


（此代码尚未测试）

类模块扩展组件{
构造函数（）{
超级（）
此.state={
投入：[
{type:'text'，placeholder:'placeholder text'，name:'text1'，id:'text1'，value:'aaa'}，
{类型：'text'，占位符：'other placeholder text'，名称：'text2'，id:'text2'，值：''}，
{类型：'text'，占位符：'third placeholder text'，名称：'text3'，id:'text3'，值：''}，
]
}
this.handleInputChange=this.handleInputChange.bind（this）
this.saveModule=this.saveModule.bind（this）
}
//将此更改为箭头函数
handleInputChange=（事件）=>{
const name=event.target.name；
常量值=event.target.value；
constOldInputState=this.state.inputs.find（i=>i.name==name）；
//使用排列运算符或Object.assign创建全新的状态对象
这是我的国家({
...,
this.state，//从旧状态复制所有内容
//期望更改'inputs'值
{输入：[//创建一个全新的数组
…this.state.inputs.filter（i=>i.name！==name），
{…oldInputState，value}//用新值替换旧值
//参考我的视频，这是一个很好的解释
]}
});
}
renderInput=（输入）=>{
返回(
)
}
render（）{
返回(
{this.state.inputs.map（this.renderInput）}
)
}
}
导出默认模块

祝你好运
 首先，您必须找到要处理的对象的索引。因此，考虑<代码>事件>目标.Name <代码>作为筛选数组的条件。然后使用更改创建一个新数组。并设定状态。这是一个很好的方法你能解释一下你做了什么吗？用更多代码替换一堆代码对任何可能正在学习的人都没有帮助React@DarrenSweeney用适当的信息更新了答案
class Module extends Component {
    constructor() {
        super()

        this.state = {
            inputs: [
                { type: 'text', placeholder: 'placeholder text', name: 'text1', id: 'text1', value: 'aaa' },
                { type: 'text', placeholder: 'another placeholder text', name: 'text2', id: 'text2', value: '' },
                { type: 'text', placeholder: 'third placeholder text', name: 'text3', id: 'text3', value: '' },
            ]
        }

        this.handleInputChange = this.handleInputChange.bind(this)
        this.saveModule = this.saveModule.bind(this)
    }

    // change this to an arrow function
    handleInputChange = (event) =>  {
        const name = event.target.name;
        const value = event.target.value;
        const oldInputState = this.state.inputs.find(i => i.name === name);
        // use the spread operator or Object.assign to create a brand new state object
        this.setState({
            ...,
            this.state, // copy everything from the old state
            // expect change the `inputs` value
            {inputs: [ // create a brand new array
                ...this.state.inputs.filter(i => i.name !== name),
                {...oldInputState, value} // replace old value with the new value
                // refer to that video I included, it's a great explanation
            ]}
        });
    }

    renderInput = (input) => {
        return(
            <div key={ input.id }>
                <input
                    type={ input.type }
                    name={ input.name }
                    placeholder={ input.placeholder }
                    onBlur={ this.saveModule }
                    value={ input.value }
                    onChange={ this.handleInputChange }
                />
            </div>
        )
    }

    render() {
        return (
            <div>
                { this.state.inputs.map(this.renderInput) }
            </div>
        )
    }
}

export default Module