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

问题描述

React在这里相对较新，如果可以轻松解决，请原谅我。

我有一个具有表单的组件-该表单有4个选择，我的意图是每次您单击表单上的一个选项时，都会使用所选选择中的数据来呈现子组件。

这是我遇到的问题。目前，我可以在选择第一个选项时加载子组件，但是除非先选择默认值，否则无法重新加载该组件。

附上我的代码：App.js;这是codeandBox：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（通过选择“-”），然后通过选择另一种选择再次将其设置为true，所有这些都是为了重新呈现childComponent。>

是否有解决方法？是否可以在不选择默认值的情况下重新渲染子组件？

解决方法

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

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

如您所见，您始终渲染this.input。应该分配给props.detail，但是请注意，分配仅发生在构造函数中，这意味着它不够动态。

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

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

,

问题

子组件对更新后的道具没有反应。将选择值切换回“-”后，您只会看到更新后的值 。

{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>
    );
  }
}

解决方案

只需在孩子中渲染道具

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

建议

将初始值设置为"--"并在用户界面中禁用该选项，以使其不可选择

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>
    );
  }
}