Question

你好我有这个选择组件

<select
    value={(this.state.selectedVersion)}
    disabled={(this.state.versionDisable)}
    onChange={this.handleVersionChange}
>
    <option disabled hidden>Välj version</option>
    {
        this.state.versions.map((object, i) => {
            return (
                <option key={i} value={object}>
                    {object.text}{object.lastModified}
                </option>
            )
        })
    }
</select>

这里我希望onChange事件采取我记录的选项值是我想要的东西并将其用作值但是当我将它发送到我的onChange处理程序时

handleVersionChange(event){
    console.log(event);
    this.setState({selectedVersion: event.target.value});
    console.log(this.state.selectedVersion);
}

第一个记录发送事件的console.log我获得了一些代理对象，我知道它是什么或来自它。我duno，如果我得到这个问题，因为我用地图创建选项。谁知道我做错了什么？

Answer 1

我仍然认为问题是将option元素的value属性设置为Object。请考虑使用字符串。您始终可以从原始数组中反向查找更改处理程序中的值以获取完整对象。

在下面的示例中，我使用我创建的名为id的属性作为选择选项值。该值可以是对象中的任何唯一标识符，它是一个简单的类型，如字符串或数字。相同的值可用于反向查找完整对象

Sample JS Fiddle

＆＃13;

class SelectApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: [
      	{ text: "Learn JavaScript", id: 1 },
        { text: "Learn React", id: 2 },
        { text: "Play around in JSFiddle", id: 3 },
        { text: "Build something awesome", id: 4 }
      ]
    }
    selected:null
  }
  
  handleChange = (e)=>{
    // Get the selected value which is a string
  	var selectedId = e.target.value;
    console.log(selectedId);
    // Reverse look up on the array to find the full object
    var selected = this.state.items.find((d)=>(d.id==selectedId));
    console.log(selected);
    // Update state with object
    this.setState({selected});
  }
  
  render() {
    return (
      <div>
        <select onChange={this.handleChange}>
        <option disabled selected>Select</option>
        {this.state.items.map((item, i) => (
        	<option key={i} value={item.id}>{item.text}</option>
        ))}
        </select>
      </div>
    )
  }
}

ReactDOM.render(<SelectApp />, document.querySelector("#app"))

＆＃13;

Answer 2

您的handleVersionChange需要是一个监听功能。替换为：

 handleVersionChange = (event) => {
     console.log(event);
     this.setState({selectedVersion: event.target.value});
     console.log(this.state.selectedVersion);
 }

或在constructor添加：

this.handleVersionChange = this.handleVersionChange.bind(this)

Answer 3

为什么要将另一对括号放在卷曲的括号内：{(this.state.selectedVersion)}？我错过了什么：{this.state.selectedVersion}？

Answer 4

尝试在componentWillReceiveProps中记录控制台，而不是在句柄更改功能中。

SetState是异步的。

React select onChange不使用选项值

4 个答案: