英文:
How to handle a change in different text input fields of the same form using React.js
问题
我有一个包含两个输入字段的表单：姓名和成绩。
我想根据哪个字段正在更改来更新属性，而不是创建两个（将会增加）处理每个字段的函数。
以下是当前的代码，它只使用值更新“name”属性：
handleStudentChange(e) {
console.log(e.target)
var value = e.target.value
console.log("value: ", value)
var field = e.target
// e.target返回<input id="mark1" class="form-control" type="number" placeholder="Mark 1" value="40">
this.setState({
activeStudent: {
...this.state.activeStudent,
name: value
}
})
}
可以通过访问e.target.id属性来使field获取目标属性名称，如“name”或“mark1”。有没有一种将field转换为要使用的属性field:value的方法，或者有没有更好的处理整个事情的方法？提前感谢您！
英文:
I have a form containing two fields of input; name and mark
I want to update a property depending on which field is changing, instead of making two (will be increasing) functions to handle each field individually.
Here is the current code which only updates the name property with the value:
handleStudentChange(e) {
console.log(e.target)
var value = e.target.value
console.log("value: ", value)
var field = e.target
//e.target returns <input id="mark1" class="form-control" type="number" placeholder="Mark 1" value="40">
this.setState({
activeStudent: {
...this.state.activeStudent,
name: value
}
})
}
Field can take the value of the target property name such as name or mark1 by tapping into the e.target.id property. Is there a way to cast field as the property to use field:value or any other better way of going about the whole thing? Thanks in advance 
答案1
得分: 1
handleChange = (e) => {
const { name, value } = e.target;
this.setState({ ...activeStudent, [name]: value });
};
要使用这种方法，你应该将输入的 name 属性设置为状态属性。例如，如果 activeStudent 有 "name" 属性，相应的输入应该设置为
<input
value={this.state.activeStudent.name}
onChange={handleChange}
type="text"
// 这是重要的部分
name="name"
id="name"
/>
英文:
handleChange = (e) => {
const { name, value } = e.target;
this.setState({ ...activeStudent, [name]: value });
};
the important thing to use this approach, you should have input name prop set as the state property. for example, if activeStudent has "name" property, corresponding input should be set
<input
value={this.state.activeStudent.name}
onChange={handleChange}
type="text"
// this is important part
name="name"
id="name"
/>
答案2
得分: 0
你可以为键值设置一个属性。
<input id="mark1" class="form-control" type="number" placeholder="Mark 1" value="40" key="mark" />
<input id="name1" class="form-control" placeholder="Name 1" value="Test Name" key="name" />
然后，你可以通过调用 e.target.getAttribute('key') 来获取该属性。
handleStudentChange(e) {
var value = e.target.value;
var key = e.target.getAttribute('key');
this.setState({
activeStudent: {
...this.state.activeStudent,
[key]: value
}
});
}
英文:
You can set a attribute for key value.
<input id="mark1" class="form-control" type="number" placeholder="Mark 1" value="40" key="mark" />
<input id="name1" class="form-control" placeholder="Name 1" value="Test Name" key="name" />
Then you can get that attribute by calling e.target.getAttribute('key').
handleStudentChange(e) {
var value = e.target.value
var key = e.target.getAttribute('key')
this.setState({
activeStudent: {
...this.state.activeStudent,
[key]: value
}
})
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论