Javascript 以对象作为属性值反应选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42564515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React selecting option with object as attribute value
提问by Frilox
I have an issue with react when I want to change the selected option. The problem is that the value is an object and I can't pass it in option value attribut.
当我想更改所选选项时，我遇到了反应问题。问题是该值是一个对象，我无法在选项值属性中传递它。
See the following code:
请参阅以下代码：
class Selector extends React.Component {
contructor(props) {
super(props)
this.state = { obj: null }
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
this.setState({obj: e.target.value})
}
render() {
<select onChange={handleChange}>
{this.props.listOption.map((option, index) =>
<option key={index} value={option.obj}>
{option.name}
</option>
)}
</select>
}
}
and with
与
<Selector option={[{name: "name", obj:{...}}, ...]}>
I need to change the state of the component with the value of the selected option.
What I get when the state change is "object Object". I suppose this happens because react can't embed javascript object in attribut of final view. I am right?
我需要使用所选选项的值更改组件的状态。当状态改变时我得到的是"object Object". 我想这是因为 react 无法在最终视图的属性中嵌入 javascript 对象。我是对的？
Moreover, I set objin state as null in the constructor
Is there a right way to do it?
此外，我obj在构造函数中将 state设置为 null 有没有正确的方法来做到这一点？
回答by Jyothi Babu Araja
You can make use of indexof options
您可以利用index的options
class Selector extends React.Component {
contructor(props) {
super(props);
this.state = { obj: null }
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
this.setState({obj: this.props.listOption[e.target.value].obj})
}
render() {
<select onChange={handleChange}>
{this.props.listOption.map((option, index) =>
<option key={index} value={index}>
{option.name}
</option>
)}
</select>
}
}
Moreover, I set obj in state as null in the constructor Is there a right way to do it?
此外，我在构造函数中将状态中的 obj 设置为 null 有没有正确的方法来做到这一点？
I depends on your requirement. If you want to show at least one option as selected you can keep that instead of null
我取决于你的要求。如果您想至少显示一个选项，您可以保留它而不是null
回答by Sreeragh A R
Pass object JSON string as value and then parse it.
将对象 JSON 字符串作为值传递，然后对其进行解析。
handleChange(event) {
let obj = JSON.parse(event.target.value); //object
}
render() {
<select onChange={handleChange}>
{this.props.listOption.map((option, index) =>
<option key={index}
value={JSON.stringify(option)}> //pass object string as value
{option.name}
</option>
)}
</select>
}
回答by Luke359
I assume you want only one option will be selected. So the easiest way would be to set selectedIndex. When using construct always think of value type. this.state = { selectedIndex: 0}
我假设您只想选择一个选项。所以最简单的方法是设置 selectedIndex。使用构造时，请始终考虑值类型。this.state = { selectedIndex: 0}
Now you've state with selectedIndex object which firstly is equal to 0.
现在你已经声明了 selectedIndex 对象，它首先等于 0。
In render method you could then just check for the index:
在渲染方法中，您可以只检查索引：
{this.props.listOption.map((option, index) => {
this.state.selectedIndex == index ? (
<option key={index} value={option.obj} selected>option.name</option>
): (
<option key={index} value={option.obj}>option.name</option>
))}
And on handle change setState with e.target.key.
并使用 e.target.key 处理更改 setState。
I may have left syntax errors... Altought I hope it helps.
我可能留下了语法错误...虽然我希望它有所帮助。
