属性値としてオブジェクトを選択して反応オプションを選択する

Question

選択したオプションを変更したいときに反応に問題があります。 問題は、値がオブジェクトで、オプション値属性で渡すことができないということです。

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

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

以下のようにあなたはoptionsのindexを利用することができます。また、私は、コンストラクタでNULLとして状態でOBJを設定し、それを行うには 正しい方法はありますか？

あなたの要件によって異なります。少なくとも1つのオプションを選択して表示したい場合は、その代わりにそれを保持することができますnull

Answer 2

1つのオプションしか選択されないとします。 したがって、最も簡単な方法はselectedIndexを設定することです。 コンストラクトを使用するときは、常に値型を考えます。 this.state = {selectedIndexの：0}

今度は、まずでは、あなたがちょうどインデックスを確認できた方法レンダリング0

に等しいselectedIndexのオブジェクトと状態ました：

{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それが助けてくれることを願っています。