根据我的基本理解,当你尝试处理一个选择表单元素在reactJS中,您在HTMLOptionsCollection中生成一个对象。
该对象方法和属性的根本根源是e.目标.选项.
您的项目存储在 e.target.options.value 属性中。
要访问存储在 options.value 对象中的值,您可以使用 [i] 循环值,即 e.target.options[i].value 属性。
e.target.options[i].value 返回字符串数据类型。
按照我刚才所说的,我假设对象的存储遵循数字递增约定,如下所示:
e.target.options[i].value 其中 { [i] : 值, [i +1] : 值 (...)}...
通过使用 e.target.options[i].selected 您可以控制是否有值存储在特定位置。
e.target.options[i].selected 返回一个布尔值,对于处理代码流很有用。
现在就看你了。
这里是我使用 JavaScript 代码处理 JSX 中的多个选择表单的代码:
// Create the React Component
class ChooseYourCharacter extends React.Component {
// Set the constructor
constructor(props) {
super(props);
this.state = {value: 'coconut'};
// bind the functions
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
// extract the value to fluently setState the DOM
handleChange (e) {
var options = e.target.options;
var value = [];
for (var i = 0, l = options.length; i < l; i++) {
if (options[i].selected) {
value.push(options[i].value);
}
}
this.setState({value: value});
}
// display in client-side the values choosen
handleSubmit() {
alert("you have choose :" + this.state.value);
}
(...)