子供の更新を選択

Question

私はReactを初めて使用しています。私は3つの選択肢を持つ簡単な動的フォームを作成しようとしています。

私の問題は、子選択のオプションは、親選択で選択されたオプションに基づいて入力する必要があります。

var MySelect = React.createClass({ 
getInitialState: function() { 
    return { 
     value: 'select' 
    } 
}, 
change: function(event){ 
    this.setState({value: event.target.value}); 
}, 
render: function(){ 
    return(
     React.createElement(
    'div', 
    { }, 
    React.createElement(
    'select', 
    { id: this.props.id, 
     onChange: this.change, 
     value: this.state.value 
    }, 
    React.createElement("option", null, "Yes"), 
    React.createElement("option", null, "No"), 
    this.props.title 
), 
    React.createElement(
    'select', 
    { id: this.props.id, 
     onChange: this.change, 
     value: this.state.value 
    }, 
    React.createElement("option", null, "Author1"), 
    React.createElement("option", null, "Author2"), 
    this.props.title 
), 
    React.createElement(
    'select', 
    { id: this.props.id, 
     onChange: this.change, 
     value: this.state.value 
    }, 
    React.createElement("option", null, "Book1"), 
    React.createElement("option", null, "Book2"), 
    this.props.title 
) 
)); 
} 
}); 

だから、はい、私たちは2人の作家を持っている、と我々はauthor1選択した場合選択した場合 - 我々は唯一のbook1を選択することができます。

は、ここに私のコードです。

author2を選択した場合、book2のみ選択できますがbook1は選択できません。いいえを選択した場合、著者や書籍は選択できません。私は州と何かがあるはずだと信じていますが、私はまだ文書からその要点を得ることはできません。

Answer 1

複雑なステートマシンのすべてを単一のコンポーネントで管理するよりも、コンポーネントの流れに分解する方がよいでしょう。

1. 新しい要素にAuthor要素のロジックを抽出することができます。最初の選択に「はい」がある場合は、Authorコンポーネントをレンダリングし、それ以外の場合は作成しません。

2. Authorコンポーネントでは、選択した著者を状態として管理し、その状態でBookコンポーネントにプロップとして渡す必要があります。

3. ブックコンポーネントでは、選択メニューのオプションを、小道具で受け取った作者ごとに表示できます。

4. また、変更する小道具を追跡するためにブックコンポーネントでcomponentWillReceivePropsを使用する必要があります。

Answer 2

コードで説明します。あなたは以下を行うことができます。 3つのブール状態を持つことができます.1つは著者の選択リストに割り当てられ、2つは個々のオプション値（book1、book2）に割り当てられます。ユーザーがリストで選択した内容に基づいて - はいまたはいいえ。 次のコードを考えます。はい/いいえ選択リスト

   If(event.target.value=="Yes") 
      { 
       this.setState({AuthorsSelectable:true, 
       book1Selectable:true, 
       book2Selectable:true 
       }); 

      } 
      else{ 
       this.setState({AuthorsSelectable:false, 
       book1Selectable:false, 
       book2Selectable:false 
      }); 

      } 

の のonchangeハンドラは、今、あなたは希望Author1/Author2リストののonchangeハンドラで

   if(event.target.value="Author1"){ 

      this.setState({book1Selectable:true, 
      book2Selectable:false 
      }); 

      } 
     else{ 

      this.setState({ 

      book1Selectable:false. 
      book2Selectable:true 
      }); 

・ホープこのことができます。