React this.input.value与句柄更改

Question

还有什么更好的？

我有一个有10个输入的表格。

我应该使用this.input.value还是处理更改并将其存储在state中？

handleChange(e) {
    this.setState({input: e.target.value});
}
...
<input type="text" value={this.state.input} onChange={this.handleChange} />

或

onSubmit() {
    const inputValue = this.input.value;
    ...
}
...
<input type="text" ref={(input) => {this.input = input;}} />

从文件中：

什么时候使用参考文献 参考文献有几个很好的用例:管理焦点、文本选择或媒体播放。触发命令动画。与第三方DOM库集成。避免对任何可以以声明方式完成的操作使用“参考”。

Answer 1

设置受控输入是一种痛苦，但我使用这种模式使其变得更容易一些。

为所有输入创建一个onChange事件处理程序：

handleInputChange(e){
    const target = e.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({
        [name]: value
    });
}

然后，对于您的输入，一定要给它一个与要更新的状态中的键匹配的name。

render() {
    const { firstName, lastName, email, acceptTerms } = this.state;
    return (
        <form>
            <input name="firstName" onChange={this.handleInputChange} value={firstName} />
            <input name="lastName" onChange={this.handleInputChange} value={lastName} />
            <input name="email" onChange={this.handleInputChange} value={email} />
            <input type="checkbox" name="acceptTerms" onChange={this.handleInputChange} checked={acceptTerms} />
        </form>
    )
}