Javascript 问题：嘿，海登，谢谢你的回答！跟进：是否有可能在每次单击一个选项以及随后重新呈现childComponent时，我都可以让childComponent获取URL并检索数据？这是一个代码沙盒：你能解释一下你想要什么吗？嘿，海登，我实际上在这里问了一个单独的问

---

问题：嘿，海登，谢谢你的回答！跟进：是否有可能在每次单击一个选项以及随后重新呈现childComponent时，我都可以让childComponent获取URL并检索数据？这是一个代码沙盒：你能解释一下你想要什么吗？嘿，海登，我实际上在这里问了一个单独的问题：

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;

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;

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

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