Поднятие состояния в React

Question

Скажи, что у меня есть этот класс реагирования. Это НЕ мой основной компонент, который я рендеринг. как я могу передать состояние, которое я установил здесь, вверх в родительский компонент.

class Player extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          playerOneName: ''
        }
        this.selectPlayerOne = this.selectPlayerOne.bind(this);
      }

      selectPlayerOne(e, data) {
        this.setState({playerOneName: data.value})
      }

      render() {
        let players = [];
        this.props.players.map((player) => {
          players.push({text: player.name, value: player.name})
        })

        return (
          <div className="playersContainer">
            <div className="players">
              <Dropdown onChange={this.selectPlayerOne} placeholder='Select Player One' fluid selection options={players} />
            </div>
          </div>
        )
      }
    }

когда я говорю родительский компонент, я имею в виду класс, который будет отображать плеер следующим образом:

<Player />  

Т.е. как я могу сделать this.state.playerOneName доступным для родителя?

Answer 1

Эй, суть в том, что вы в основном передаете из родительского компонента в дочерний компонент реквизит, который является функцией.

В родительском:

handler(newValue){ 
    this.setState({key: newValue}) 
}
render() {
    return(
        <Child propName={handler.bind(this)}>
    )
}

Когда в вашем дочернем компоненте происходит изменение, вы вызываете функцию и передаете новое значение в качестве ввода. Таким образом, вы вызываете функцию в своем дочернем компоненте и вносите изменения в состояние родительского компонента.

В вашем случае вы хотите вместо установки состояния playerOneName передать функцию от родителя этого класса и сделать что-то вроде this.props.functionFromParent(playerOneName) в вашей функции "selectPlayOne".

Это правда, что структура потока является однонаправленной, однако, когда вы имеете дело со "умными" и "немыми" компонентами, вы увидите, что таким образом данные передаются из "тупого" компонента в "умный" компонент. Это совершенно приемлемая форма React!

Answer 2

"Поднятие состояния вверх" для React означает, что вы должны заменить данные из вашего дочернего компонента в состояние родительского компонента и передать данные для представления дочернему компоненту с помощью реквизита.

Answer 3

Вы можете сделать что-то подобное, чтобы достичь своей цели. Создайте родительский компонент, который содержит playerOneName как его состояние. Передайте его в качестве опоры дочернему компоненту, а также функцию, которая изменяет playerOneName всякий раз, когда это изменяется в дочернем компоненте.

class Parent extends Component {
  constructor(props){
     this.state = {
      playerOneName: ''
     }
  }
  render() {
      return(
          <Child 
              playerOneName={this.state.playerOneName}
              onPlayerOneNameChange={(playerOneName) => this.setState({playerOneName})}
         />
      );
  }
}

Используйте эту функцию в дочернем компоненте, чтобы изменить имя playerOneName в родительском компоненте, как этот, ваш дочерний компонент отображает только значение playerOneName Все изменения сделаны только в родительском компоненте.

class Child = props => {
  const { playerOneName, onPlayerOneNameChange } = props;
  return (
     <TextInput 
       value={playerOneName}
       onChangeText={(playerOneName) => onPlayerOneNameChange(playerOneName)}
     />
  );
}

По этому вы можете использовать обновленный playerOneName в вашем родительском компоненте, когда вы хотите с помощью this.state.playerOneName