Question

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

请参阅以下代码：

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"时得到的结果。我想这是因为反应不能将javascript对象嵌入到最终视图的归属中。我是对的？

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

Answer 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状态设置为null是否存在正确的方法吗？

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

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

Answer 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。

我可能遗漏了语法错误...... Altought希望它有所帮助。

Answer 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;

Answer 5

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

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

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

可以使用 data-index 访问选项 option 的属性 option.dataset.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>
}

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

选择对象选择选项作为属性值

5 个答案: