反應選擇選項和對象attribut值

我有一個問題，當我想改變所選的選項反應。問題是，該值是一個對象，我無法將它傳遞給選項值attribut。反應選擇選項和對象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在狀態爲空構造函數有沒有正確的方法來做到這一點？

來源

2017-03-02 Frilox

你可以利用的optionsindex如下圖所示

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

來源

2017-03-02 19:48:39

謝謝，這正是我想知道！ – Frilox

我假設你想只有一個選項會被選中。所以最簡單的方法是設置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> 
    ))}

而且手柄上變化的setState與e.target.key。

我可能已經離開了語法錯誤... Altought我希望它能幫助。

來源

2017-03-02 20:00:40 Luke359

反應選擇選項和對象attribut值

回答

相關問題