が反応 - 条件付きのIは、ユーザーの入力を管理するように反応するコンポーネントを作成しています二度目

Question

のためのコンポーネントを表示しようとして失敗したレンダリング。 このコンポーネント、UserInput.js、以下の方法、

renderOriginを有する - フォームコンポーネント、

renderCitiesを表示 - diferent小道具、

renderAddCitiesQuestionと同じフォーム・コンポーネントを表示 - はい（2つのボタンが描画状態はトンで受信したセット - 質問

getChildSate「継続」に答えて状態を設定する - あるいはまったく）

は

handleContinueは、によって処理されていないました（フォームのような）彼の子コンポーネント

レンダリング - 状態に基づいて条件付きレンダリングを。状態にはブール値のプロパティ、 'start'（最初のレンダリング）、 'rendercities'、 'renderQuestion'があります。

次のように条件の流れがあります。 まず、state.startがtrueで、renderOriginを呼び出します。 、state.startがfalseになり、state.renderCitiesがtrueになり、renderCities（）が呼び出されます。それよりもstate.rendercitiesがfalseになり、state.renderQuestionがtrueになると、renderAddCityQuestion（）が呼び出されます。今私は、そこに2 possibilitesがあり、いずれかのユーザーが[いいえ]ボタンをクリックしない、と私たちは何をレンダリングするべきではない、または彼がはいクリックするとstate.renderCitiesがtrueになる（とstate.renderQuestionが偽となる）（renderCitiesを呼び出す）（そして、それが呼び出されますconsole.logで確認してください）、そのコンポーネントは表示されず、質問コンポーネントは表示されたままです。

私は間違いを見つけるために見ることができません。 ここにコード全体があります。ここ

import React from 'react'; 
 
import Form_city from './Form_city'; 
 

 
class UserInput extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.getChildState = this.getChildState.bind(this); 
 
    this.handleContinue = this.handleContinue.bind(this); 
 
    this.renderOrigin = this.renderOrigin.bind(this); 
 
    this.renderCities = this.renderCities.bind(this); 
 
    this.renderAddCitiesQuestion = this.renderAddCitiesQuestion.bind(this); 
 
    this.state = { 
 
     origin: null, 
 
     cities: [], 
 
     renderCities: false, 
 
     renderQuestion: false, 
 
     start: true 
 
    } 
 
    } 
 

 
    getChildState(stateName, stateVal) { 
 
    console.log('setting state. received stateName, stateVal', stateName, stateVal); 
 
    this.setState({ 
 
     [stateName] : stateVal 
 
    }); 
 
    console.log('set state done: ', this.state); 
 
    } 
 

 
    handleContinue(answer) { 
 
    this.state.renderQuestion = false; 
 
    answer === 'yes' ? this.state.renderCities = true : this.state.renderCities = false; 
 
    console.log('state after clicking answer: ', this.state); 
 
    this.render(); 
 
    } 
 

 
    renderOrigin() { 
 
    return(
 
     <div> 
 
     <Form_city 
 
      divName="originForm" 
 
      text="Please select an Origin:" 
 
      type="origin" 
 
      placeHolder="Origin" 
 
      getChildState={this.getChildState} 
 
     /> 
 
     </div> 
 
    ); 
 
    } 
 

 
    renderCities() { 
 
    console.log('rendering city form'); 
 
    return(
 
     <div> 
 
     <Form_city 
 
      divName="citiesForm" 
 
      text="Which city do you want to visit?" 
 
      type="cities" 
 
      placeholder="Destination" 
 
      getChildState={this.getChildState} 
 
     /> 
 
     </div> 
 
    ); 
 
    } 
 

 
    renderAddCitiesQuestion() { 
 
    console.log('rendering question'); 
 
    return(
 
     <div> 
 
     <p>Do you want to visit any other city?</p> <br /> 
 
     <button type="button" onClick={this.handleContinue.bind(this, 'yes')}>Yes</button> 
 
     <button type="button" onClick={this.handleContinue.bind(this, 'no')}>No</button> 
 
     </div> 
 
    ); 
 
    } 
 

 
    render() { 
 
    console.log('inside render\n, state: ', this.state); 
 
    let content = null; 
 
    if (this.state.start === true) { 
 
     console.log('inside render origin conditional'); 
 
     content = this.renderOrigin(); 
 
    } else if (this.state.renderCities === true) { 
 
     console.log('inside render cities conditional'); 
 
     content = this.renderCities(); 
 
    } else if (this.state.renderQuestion === true) { 
 
     console.log('inside render question conditional'); 
 
     content = this.renderAddCitiesQuestion(); 
 
    } else { 
 
     content = <p>Weird stuff?</p> 
 
    } 
 

 
    return(
 
     <div> {content} </div> 
 
    ); 
 
    } 
 

 
} 
 

 
export default UserInput;

も完全酒のためのフォームコンポーネントです。

import React from 'react'; 
 

 
class Form_city extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = {data: ''}; 
 
    this.handleSubmit = this.handleSubmit.bind(this); 
 
    this.handleChange = this.handleChange.bind(this); 
 
    } 
 

 
    handleChange(event) { 
 
    this.setState({data: event.target.value}); 
 
    } 
 

 
    handleSubmit(event) { 
 
    console.log('clicked submit button'); 
 
    event.preventDefault(); 
 
    if (this.props.type === 'origin') { 
 
     console.log('inside handle submit Origin, passing: ', this.state.data); 
 
     this.props.getChildState('start', false); 
 
     this.props.getChildState('origin', this.state.data); 
 
     this.props.getChildState('renderCities', true); 
 
    } else if (this.props.type === 'cities') { 
 
     console.log('inside handle submit Cities'); 
 
     this.props.getChildState('cities', this.state.data); 
 
     this.props.getChildState('renderCities', false); 
 
     this.props.getChildState('renderQuestion', true); 
 
    } 
 

 
    } 
 

 
    render() { 
 
    return(
 
     <div className = {this.props.divName}> 
 
     <form onSubmit = {this.handleSubmit}> 
 
      <label> 
 
      {this.props.text} <br /> 
 
      <input 
 
       type="text" 
 
       placeholder={this.props.placeholder} 
 
       value={this.state.data} 
 
       onChange={this.handleChange} 
 
      /> 
 
      </label> 
 
      <input type="submit" value="Submit" /> 
 
     </form> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default Form_city;

Answer 1

状態を更新するためにあなたの方法が間違っている、あなたが新しい状態での再描画コンポーネントにしたい場合はsetStateを使用する必要があります。

handleContinue(answer) { 
    if (answer === 'yes'){ 
     this.setState({ 
      renderQuestion: false, 
      renderCities: true, 
      renderCities: false 
     }) 
    } 
    } 

かなり良い説明理由：https://stackoverflow.com/a/40309023/7132340 docs