Javascript 根据用户输入，可以使用setState更改状态中的字段吗

我正在创建一个包含三个输入字段的表单，我想将状态更改为已输入的状态。有没有办法根据用户选择填写的字段来设置状态，而不必编写三个单独的函数来处理所有三个输入

提前谢谢

handleChange = e => {
        this.setState({
            //Can this be changed to target the right field in the state// : e.target.value
        })
    }
    render() {
        return (
            <div>
                <div>
                    <label htmlFor="name">Name:</label>
                    <input 
                        type="text"
                        value={this.state.name}
                        onChange={this.handleChange}
                    />
                </div>
                <div>
                    <label htmlFor="county">County:</label>
                    <input 
                        type="text"
                        value={this.state.county}
                        onChange={this.handleChange}
                    />
                </div>
                <div>
                    <label htmlFor="position">Position:</label>
                    <input 
                        type="text"
                        value={this.state.position}
                        onChange={this.handleChange}
                    />
                </div>
                <button>Submit Player</button>
            </div>
        )
    }

handleChange=e=>{
这是我的国家({
//是否可以将其更改为状态为//：e.target.value的右字段的目标
})
}
render（）{
返回(
姓名：
县：
职位：
提交玩家
)
}

这是代码

handleChange = e => {
    this.setState({
         [e.target.name]: e.target.value
    });
}
render() {
    return (
        <div>
            <div>
                <label htmlFor="name">Name:</label>
                <input 
                    type="text"
                    name="name"
                    value={this.state.name}
                    onChange={this.handleChange}
                />
            </div>
            <div>
                <label htmlFor="county">County:</label>
                <input 
                    type="text"
                    name="county"
                    value={this.state.county}
                    onChange={this.handleChange}
                />
            </div>
            <div>
                <label htmlFor="position">Position:</label>
                <input 
                    type="text"
                    name="position"
                    value={this.state.position}
                    onChange={this.handleChange}
                />
            </div>
            <button>Submit Player</button>
        </div>
    )
}

handleChange=e=>{
这是我的国家({
[e.target.name]：e.target.value
});
}
render（）{
返回(
姓名：
县：
职位：
提交玩家
)
}

这是代码

handleChange = e => {
    this.setState({
         [e.target.name]: e.target.value
    });
}
render() {
    return (
        <div>
            <div>
                <label htmlFor="name">Name:</label>
                <input 
                    type="text"
                    name="name"
                    value={this.state.name}
                    onChange={this.handleChange}
                />
            </div>
            <div>
                <label htmlFor="county">County:</label>
                <input 
                    type="text"
                    name="county"
                    value={this.state.county}
                    onChange={this.handleChange}
                />
            </div>
            <div>
                <label htmlFor="position">Position:</label>
                <input 
                    type="text"
                    name="position"
                    value={this.state.position}
                    onChange={this.handleChange}
                />
            </div>
            <button>Submit Player</button>
        </div>
    )
}

handleChange=e=>{
这是我的国家({
[e.target.name]：e.target.value
});
}
render（）{
返回(
姓名：
县：
职位：
提交玩家
)
}

与其依赖DOM中的任何东西来识别要更新的元素（这不是React的最佳实践，因为它混淆了状态和模型的真实来源），不如将表单完全抽象到数据结构中：

state = {
    formInputs: [
        {
            name: 'Name',
            type: 'text',
            value: '',
        },
        {
            name: 'Country',
            type: 'text',
            value: '',
        },
        {
            name: 'Position',
            type: 'text',
            value: '',
        },
    ]
};
handleChange = (evt, n) => {
    this.setState((state) => {
        const arr = state.formInputs.slice();
        arr[n] = {value: evt.target.value, ...arr[n]};
        return {formInputs: arr};
    });
}
render() {
    return (
        <div>
            {this.state.formInputs.map((ea, i) => {
                return (
                    <div key={ea.name} >
                        <label htmlFor={ea.name}>{`${ea.name}:`}</label>
                        <input {...ea} onChange={(e) => {this.handleChange(e, i)}} />
                    </div>
                );
            })}
            <button>Submit Player</button>
        </div>
    );
}

状态={
表格输入：[
{
姓名：'姓名'，
键入：“文本”，
值：“”，
},
{
名称：'国家'，
键入：“文本”，
值：“”，
},
{
姓名：'职位'，
键入：“文本”，
值：“”，
},
]
};
handleChange=（evt，n）=>{
this.setState（（状态）=>{
const arr=state.formInputs.slice（）；
arr[n]={value:evt.target.value，…arr[n]}；
返回{formInputs:arr}；
});
}
render（）{
返回(
{this.state.formInputs.map（（ea，i）=>{
返回(
{`${ea.name}:`}
{this.handleChange（e，i）}/>
);
})}
提交玩家
);
}

以抽象组件状态存储数据/输入及其值，然后使用

Array.map（）

将其转换为呈现的UI，这是React中非常常见和有用的模式

优点：

• 状态的真实来源、数据模型以及如何呈现它是完全明确的，100%在React的控制之下
• 可以添加任意数量的输入并动态渲染
• 一个更新函数，用于处理更新任意数据字段的存储值
• 使用推荐的模式

---

与其依赖DOM中的任何东西来识别要更新的元素，还不如将表单完全抽象为数据结构，因为这并不是React的最佳实践，因为它混淆了状态和模型的真实来源：

state = {
    formInputs: [
        {
            name: 'Name',
            type: 'text',
            value: '',
        },
        {
            name: 'Country',
            type: 'text',
            value: '',
        },
        {
            name: 'Position',
            type: 'text',
            value: '',
        },
    ]
};
handleChange = (evt, n) => {
    this.setState((state) => {
        const arr = state.formInputs.slice();
        arr[n] = {value: evt.target.value, ...arr[n]};
        return {formInputs: arr};
    });
}
render() {
    return (
        <div>
            {this.state.formInputs.map((ea, i) => {
                return (
                    <div key={ea.name} >
                        <label htmlFor={ea.name}>{`${ea.name}:`}</label>
                        <input {...ea} onChange={(e) => {this.handleChange(e, i)}} />
                    </div>
                );
            })}
            <button>Submit Player</button>
        </div>
    );
}

状态={
表格输入：[
{
姓名：'姓名'，
键入：“文本”，
值：“”，
},
{
名称：'国家'，
键入：“文本”，
值：“”，
},
{
姓名：'职位'，
键入：“文本”，
值：“”，
},
]
};
handleChange=（evt，n）=>{
this.setState（（状态）=>{
const arr=state.formInputs.slice（）；
arr[n]={value:evt.target.value，…arr[n]}；
返回{formInputs:arr}；
});
}
render（）{
返回(
{this.state.formInputs.map（（ea，i）=>{
返回(
{`${ea.name}:`}
{this.handleChange（e，i）}/>
);
})}
提交玩家
);
}

以抽象组件状态存储数据/输入及其值，然后使用

Array.map（）

将其转换为呈现的UI，这是React中非常常见和有用的模式

优点：

• 状态的真实来源、数据模型以及如何呈现它是完全明确的，100%在React的控制之下
• 可以添加任意数量的输入并动态渲染
• 一个更新函数，用于处理更新任意数据字段的存储值
• 使用推荐的模式

---

将名称添加到每个输入即可。将名称添加到每个输入即可。请删除setState.1中的…this.state。setState只更新应用的值，并保持其他值不变，2。setState是异步的，因此您可以放弃其他状态更改，3。如果依赖于当前状态的值，请使用this.setState（（state）=>（{foo:state.foo+1}））以避免放弃更改（2）。请删除setState.1中的…this.state。setState只更新应用的值，并保持其他值不变，2。setState是异步的，因此您可以放弃其他状态更改，3。如果依赖于当前状态的值，请使用此.setState（（state）=>（{foo:state.foo+1}））以避免放弃更改（2）。依赖于当前状态的状态更改应使用updaterFn@詹尼克。在大多数情况下并非绝对必要，但应