Передача реквизита / состояния обратно родительскому компоненту в React JS - PullRequest
Новая
       79

Передача реквизита / состояния обратно родительскому компоненту в React JS

0 голосов
/ 30 января 2019

У меня есть два компонента, список выбора с несколькими опциями и компонент кнопки

В пользовательском интерфейсе я хотел бы сделать так, чтобы пользователь мог выбрать любую опцию из списка выбора, которую он хочет, и затемнажмите кнопку, чтобы сбросить список для «выбора»

Я оставляю родительский компонент в качестве единственного источника правды - все обновленные состояния передаются обратно в родительский компонент, на самом деле у меня это работает отличнов контексте одного файла со следующим кодом: 

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

Но то, что я на самом деле хотел бы сделать, это переместить кнопку сброса в свой собственный файл, и я упал, пытаясь передать реквизит/ state обратно к родителю.

Таким образом, метод рендеринга на самом деле будет выглядеть так: 

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

Я импортирую TestComponent, а затем внутри TestComponent будет мой код для компонента SelectListResetно проблема у меня в том, что теперь значения отправляются в него в качестве реквизита, который должен быть неизменным прямо, поэтому не может быть обновлен?

ThaНа этом мое понимание прекращается ... если кто-то может указать мне правильное направление на этом, я был бы очень благодарен!

1 Ответ

0 голосов
/ 30 января 2019

Реквизит, полученный от родителя, изменится, если будет изменено соответствующее состояние в родителе.С этим проблем нет, и весь повторный рендеринг обрабатывается React.Вы можете передавать реквизит на любое количество уровней.

...