ReactJS - 如何在单击表单上的另一个选择后重新呈现组件？

Question

这里是 React 的新手，如果这是一个简单的修复，请原谅我。

我有一个包含表单的组件 - 这个表单有 4 个选项，我的意图是每次您单击表单上的一个选项时，都会使用该选项中的数据呈现一个子组件 select编辑

这是我遇到的问题。目前，我可以根据我的第一选择 selection 加载子组件，但我无法重新加载组件，除非我首先 select 默认值。

附上我的代码：App.js；这是代码框：https://codesandbox.io/s/blissful-agnesi-1wo7s

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class App extends Component  {
    constructor(props)  {
        super(props);

        this.state = { 
          value: '',
          prevValue: '',
          submitted: false
        }; 
        
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({prevValue: this.state.value});
        this.setState({value: event.target.value});
        this.setState({submitted: true});
        event.preventDefault();
    }

    render()    {  
        var renderingBool = false;

        if (this.state.submitted)   {
            if (this.state.value !== "--")   {
                renderingBool = true;
            }
        }

        return (
            <div className="Base">
                <h1> By Productline </h1>
                <form>
                    <label className="label">
                        Select Workflow: {"               "}
                        <select value={this.state.value} onChange={this.handleChange}>
                            <option value="--"> -- </option>
                            <option value="test1">test1</option>
                            <option value="test2">test2</option>
                            <option value="test3">test3</option>
                        </select>
                    </label>
                </form>

                <div>
                    {renderingBool && <ChildComponent history={this.props.history} detail={this.state.value}/>}
                </div>
            </div>
        );
    }
}

export default App;

ChildComponent.js

import React, {Component} from 'react';

class ChildComponent extends Component{
  constructor(props)  {
    super(props);

    this.input = props.detail;
  }

  render()  {
    return(
      <h1>{this.input}</h1>
    );
  }
}

export default ChildComponent;

我目前有这个设置，因为如果我在调用子组件之前没有布尔值，我将无法渲染它。因此，我必须将 renderingBool 设置为 false（通过 selecting "--"）然后通过 selecting 另一个选择再次将其设置为 true 是有道理的，全部在一个努力重新呈现 childComponent。

有解决办法吗？我可以重新渲染子组件而不必 select 默认值吗？

Answer 1

您需要了解问题出在 ChildComponent，而不是您的 App 组件。

render()  {
    return(
      <h1>{this.input}</h1>
    );
  }

如您所见，您总是渲染 this.input。它应该被赋值 props.detail，但请注意，赋值只发生在构造函数中，这意味着它不够动态。

因此，将 ChildComponent 上的渲染方法更改为此。

...
<h1>{this.props.detail}</h1>
...

Answer 2

问题

Child 组件对更新的道具没有反应。在 将 select 值切换回“--”并重新安装组件后，您只会看到更新后的值 。

{renderingBool && ( // <-- when false, unmounts child
  <ChildComponent
    history={this.props.history}
    detail={this.state.value}
  />
)}

class ChildComponent extends Component{
  constructor(props)  {
    super(props);

    this.input = props.detail; // <-- only gets prop value when mounting
  }

  render()  {
    return(
      <h1>{this.input}</h1>
    );
  }
}

解决方案

只需在 child

中渲染道具

class ChildComponent extends Component{
  render()  {
    return(
      <h1>{this.props.detail}</h1>
    );
  }
}

建议

将初始值设置为 "--" 并在 UI 中禁用该选项，因此 select 无法

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: "--", // <-- set initial select value
      prevValue: "",
      submitted: false
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    event.preventDefault();
    const { value } = event.target;
    this.setState({
      prevValue: this.state.value,
      submitted: true,
      value
    });
  }

  render() {
    return (
      <div className="Base">
        <h1> By Productline </h1>
        <form>
          <label className="label">
            Select Workflow: {"               "}
            <select value={this.state.value} onChange={this.handleChange}>
              <option disabled value="--"> -- </option> // <-- disable so it can't be chosen
              <option value="test1">test1</option>
              <option value="test2">test2</option>
              <option value="test3">test3</option>
            </select>
          </label>
        </form>

        <div>
          {this.state.value !== "--" && (
            <ChildComponent
              history={this.props.history}
              detail={this.state.value}
            />
          )}
        </div>
      </div>
    );
  }
}