以对象作为属性值的反应选择选项答案

【问题标题】：React selecting option with object as attribute value以对象作为属性值的反应选择选项
【发布时间】：2017-07-22 17:10:34
【问题描述】：

当我想更改所选选项时，我遇到了反应问题。问题是该值是一个对象，我不能在选项值属性中传递它。

见以下代码：

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>
  }
}

与

<Selector option={[{name: "name", obj:{...}}, ...]}>

我需要使用所选选项的值更改组件的状态。当状态改变时我得到的是"object Object"。我想这是因为 react 无法将 javascript 对象嵌入到最终视图的属性中。我说的对吗？

此外，我在构造函数中将状态中的obj 设置为 null 有正确的方法吗？

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

您可以使用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>
  }
}

此外，我在构造函数中将 obj 的 state 设置为 null 有没有正确的做法？

我取决于你的要求。如果您想显示至少一个已选中的选项，您可以保留它而不是 null

【讨论】：

谢谢，这正是我想知道的！
这是我寻找“反应方式”来做某事的事情之一，而我所需要的只是一种 JavaScript 方式来做这件事。
@Jyothi 你能回答这个问题吗?，我用你的答案但不能工作stackoverflow.com/questions/66961671/…

【解决方案2】：

将对象转换为 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>
  }

【讨论】：

阅读这个遮阳篷我感觉迟钝，但这解决了我的问题，谢谢 LOL
@MatheusRibeiro 我已经修改了标题。感谢您的反馈:)
Sreeragh 你能回答这个问题吗?，我用你的答案，但不能工作。 stackoverflow.com/questions/66961671/…

【解决方案3】：

我假设您只想选择一个选项。所以最简单的方法是设置 selectedIndex。使用构造时，请始终考虑值类型。 this.state = { selectedIndex: 0}

现在你已经声明了 selectedIndex 对象，它首先等于 0。

在渲染方法中，您可以只检查索引：

{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>
    ))}

并使用 e.target.key 处理更改 setState。

我可能留下了语法错误...不过希望对您有所帮助。

【讨论】：

【解决方案4】：

试试下面的代码，

import React from 'react';

class LocationDemo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            searchLoc: undefined,
            selectedLoc: "",
            locs:[
                {"name" : "Kerala","districts":["Ernakulam", "Trivandrum"]},
                {"name" :"Tamil Nadu","districts" :["Palani","Tiruchi"]}
            ],
        };
        this.handleChangeLocation = this.handleChangeLocation.bind(this);
    }


    handleChangeLocation = (event) => {
        this.setState({ selectedLoc: event, searchLoc: event.target.value }
            , () => console.log("searchLoc", this.state.searchLoc));
    }

    render() {
        return (
            <select class="cls-location" id="id-location"
                onChange={this.handleChangeLocation}
                value={this.state.locs.find(obj => obj.value === this.state.selectedLoc)}
                required
            >
                {
                    this.state.locs.map(loc => {
                        return (
                            <option name={loc.name} value={JSON.stringify(loc)}>{loc.name}</option>
                        )
                    })
                }
            </select>

        );
    }
}

export default LocationDemo;

【讨论】：

【解决方案5】：

就我而言，我还需要在初始化时选择一个选项对象 (currentValue)。

我不想在this.props.listOption 中搜索该对象以获取其索引。

因此，我没有用它们的索引替换对象，而是在选项中添加了一个自定义属性 data-index。

可以使用option.dataset.index访问选项option的属性data-index的值：

handleChange(e) {
  const selectedIndex = e.target.selectedOptions[0].dataset.index];
  this.setState({obj: this.props.listOption[selectedIndex].obj})
}

render() {
  <select value={currentValue} onChange={handleChange}>
    {this.props.listOption.map((option, index) =>
      <option key={index} value={option.obj} data-index={index}>
        {option.name}
      </option>
    )}
  </select>
}

该代码应该不难适应多选。

【讨论】：