하위 업데이트 선택

나는 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은 선택할 수 없습니다. 아니요를 선택하면 저자 또는 서적을 선택할 수 없습니다. 나는 국가와 무언가가 있어야한다고 생각하지만, 나는 여전히 문서에서 요점을 얻을 수 없습니다.

출처

2016-08-12 Jack

단일 구성 요소의 복잡한 상태 시스템에서 모든 것을 관리하는 것보다 구성 요소의 흐름으로 분해하는 것이 좋습니다.

작성자 요소 논리를 새 구성 요소로 추출 할 수 있습니다. 첫 번째 선택 항목에 '예'가 있으면 작성자 구성 요소를 렌더링하고 그렇지 않으면 작성자 구성 요소를 렌더링합니다.
작성자 구성 요소에서 상태로 선택된 작성자를 관리하고 해당 상태를 책 구성 요소로 전달해야합니다.
북 구성 요소에서, 소품에 수신 된 작성자에 따라 선택 메뉴 옵션을 렌더링 할 수 있습니다.
또한 책 구성 요소에 componentWillReceiveProps을 사용해야 만 변화하는 소품을 추적 할 수 있습니다.

출처

2016-08-12 07:50:22

감사합니다. 예를 들어 몇 가지 코드를 제공해 주시겠습니까? 나는 주 (( – Jack

https://github.com/rajzshkr/componentWillReceiveProps - 이것은 문제를 도왔다. – Jack

코드로 설명하겠습니다. 당신은 다음을 할 수 있습니다. 3 개의 부울 상태를 가질 수 있습니다. 하나는 작성자 선택 목록에 지정되고 다른 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 
      });

희망이 도움이됩니다.

출처

2016-08-12 15:01:20

하위 업데이트 선택

답변

관련 문제