将道具/状态传递回React JS中的父组件

Question

I have two components, a select list with several options and a button component

What I'd like to do in the UI is that the user can select any option from the select list they want and then press the button to reset the list to 'select'

I'm keeping the parent component as the one source of truth - all updated states are passed back to the parent component, I've actually got this working great in the context of one file with the following code;

class SelectList extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onSelectListChange(e.target.value);
  }

  render() {
    const selectedValue = this.props.selectedValue;
    log.debug('SelectListValue(): ', this.props.selectedValue);

    return (
      <select value={selectedValue} onChange={this.handleChange}>
        <option value='One'>One</option>
        <option value='select'>select</option>
        <option value='Three'>Three</option>
        <option value='Four'>Four</option>
        <option value='Five'>Five</option>
      </select>
    );
  }
}

class SelectListReset extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onResetChange('select');
  }

  render() {
    return (
      <div>
        <button onClick={this.handleChange}>Reset list to select</button>
      </div>
    );
  }
}

class Page extends Component {
  constructor(props) {
    super(props);
    this.state={
      selectedValue: 'select'
    }
    this.handleSelectedListChange = this.handleSelectedListChange.bind(this);
    this.handleResetChange = this.handleResetChange.bind(this);
  }

  handleSelectedListChange(selectedValue) {
    this.setState({selectedValue});
  }

  handleResetChange() {
    this.setState({selectedValue: 'select'});
  }

  render() {
    log.debug('render(): ', this.props);
    log.debug('ParentListValue(): ', this.state.selectedValue);
    return (
    <div className="content-area">
        <div className="container">
            <h1>{LANGUAGES_CONTROLLER.format(this.props.languages, 'TitleSettings')}</h1>

            <div>
              <SelectList
                onSelectListChange={this.handleSelectedListChange}
                selectedValue={this.state.selectedValue}
              />

              <SelectListReset 
                onResetChange={this.handleResetChange}
                selectedValue={this.state.selectedValue}
              />

            </div>

        </div>
    </div>
    );
}

But what I've actually like to do is move the reset button to it's own file and this is where I fall over trying to pass the props / state back to the parent.

So the render method would actually look like this

render() {
  log.debug('render(): ', this.props);
  log.debug('ParentListValue(): ', this.state.selectedValue);
  return (
    <div className="content-area">
      <div className="container">
        <h1>{LANGUAGES_CONTROLLER.format(this.props.languages, 'TitleSettings')}</h1>

        <div>
          <SelectList
            onSelectListChange={this.handleSelectedListChange}
            selectedValue={this.state.selectedValue}
          />

          <TestComponent 
            onResetChange={this.handleResetChange}
            selectedValue={this.state.selectedValue}
          />

        </div>

      </div>
    </div>
  );
}

I import TestComponent and then inside of TestComponent is where I will have my code for the SelectListReset component but the problem I'm having is that now the values are sent to it as props which should be immutable right so can't be updated?

That's where my understand stops .. if someone can point me in the right direction on this I'd be very grateful!

Answer 1

Props received from a parent will change if the relevant state in the parent is changed. There's no problem with this and all the re-rendering is handled by React. You can pass props down as many levels as you like.