Question

我正在创建一个React组件来管理用户输入。此Component，UserInput.js具有以下方法，

renderOrigin - 显示Form组件

renderCities - 显示具有不同道具的相同表单组件

renderAddCitiesQuestion - 呈现由...处理的两个按钮（是或否），

handleContinue - 设置状态，回答“继续”问题

getChildSate - 设置子组件（如表单）

接收的状态

render - 基于状态的条件渲染。 State有布尔属性，'start'（对于第一个渲染），'rendercities'和'renderQuestion'。

条件的流程如下。首先，state.start为true，我们调用renderOrigin; 而且，state.start变为false，state.renderCities变为true，我们调用renderCities（）;而且，state.rendercities变为false，state.renderQuestion变为true，这使我们调用renderAddCityQuestion（）;现在有两个可能性，要么用户单击否按钮，我们应该什么都不渲染，或者他单击是并且state.renderCities变为true（并且state.renderQuestion变为false），它调用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;

这里也是Form组件的完整性。

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。

React - 条件渲染无法尝试第二次显示组件

1 个答案: