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

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

0 голосов
/ 29 января 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;
    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.onSelectListChange(e.target.value);
  }

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

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

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

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

  render() {
    return (
      <div>
        <SelectList
          onSelectListChange={this.handleSelectedListChange}
          selectedValue={this.handleSelectedListChange}
        />
        <SelectListReset 
          handleResetChange={this.handleSelectedListChange}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

Ответы [ 2 ]

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

Вы ошибаетесь в своем родительском компоненте , способе передачи selectedValue до SelectList , а также способе установки State , Я отредактировал код пожалуйста проверьте 

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

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

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

  render() {
    return (
      <div>
        <SelectList
          onSelectListChange={this.handleSelectedListChange}
          selectedValue={this.state.selectedValue}
        />
        <SelectListReset 
          handleResetChange={this.handleSelectedListChange}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);
javascript
0 голосов
/ 29 января 2019

В родительском компоненте вы передаете handleResetChange prop в SelectListReset, но выполняете this.props.onSelectListChange.Также щелчок дескриптора функции должен называться, например, handleClick вместо handleChange.

...