Question

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

先谢谢了。

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

Answer 1

这是代码

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

Answer 2

而不是依赖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>
    );
}

将数据/输入及其值存储在抽象组件状态中，然后使用Array.map()将它们转换为呈现的UI，这是React中非常常见且有用的模式。

优势：

状态的真相来源，数据模型以及如何呈现它是完全明确的，并且在React的控制下100％
可以添加任意数量的输入并使其动态呈现
一个单一的更新函数，将处理更新任意数据字段的存储值
使用推荐的React "controlled component"模式

可以根据用户输入使用setState更改状态内的字段

2 个答案: