React-使用单个事件处理程序为多个输入设置状态

Question

我是React的新手，想知道是否可以使用单个事件处理程序来设置多个输入的状态。也就是说，我不确定如何获得状态"；键"；如果这有意义的话。

import React from 'react';
class User extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
this.state = {
id: props.id,
firstName: props.firstName,
lastName: props.lastName,
email: props.email,
};
}
// how do I (can I) use this single handler to independently change the state of multiple inputs?
handleChange(e) {
this.setState({ this.state.key // wrong!: this.inputRef.current.value });
}
render() {
return (
<div>
<input type="text" ref={this.inputRef} id={`first_${this.state.id}`} value={this.state.firstName} onChange={this.handleChange.bind(this)} />
<input type="text" ref={this.inputRef} id={`last_${this.state.id}`} value={this.state.lastName} onChange={this.handleChange.bind(this)} />
<input type="email" ref={this.inputRef} id={`email_${this.state.id}`} value={this.state.email} onChange={this.handleChange.bind(this)} />
// imagine ten more inputs
</div>
)
}
}

Answer 1

您尝试做的更多与JS事件处理有关。

handleChange(event) {
const {name, value} = event.target;
this.setState({
[name]: value
});
}

• event.target是触发该事件的元素(按钮、文本区域、，等等(，并且你可以从中获取你想要的任何属性(name，类型、值等(
• 在setState内部，您必须使用类似的状态的名称与元素的名称属性的名称相对应。对于代码您提供的代码段可以在第一个输入中添加name属性标签CCD_ 3等等
• 同时组合不同类型的输入(例如文本区域和复选框(更难处理，您可能需要对其进行一点修改或使用条件，但您现在明白了：(
• 还有一件事是不要将处理程序绑定到render()方法中，因为每次渲染都会返回一个全新的函数。绑定处理程序的正确方法之一是在constructor()方法中