Question

说我有这个React Class。这不是我正在渲染的主要组件。如何将我在此处设置的状态UPWARDS传递给父组件。

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的状态，而是从此类的父级传入函数，并在“selectPlayOne”函数中执行类似this.props.functionFromParent(playerOneName)的操作。

通道模式确实是单向的，但是当您处理智能和愚蠢的组件时，您会看到数据以这种方式从哑组件传递到智能组件。这是完全可以接受的React形式！

Answer 2

React 的“提升状态”意味着您应该将子组件中的数据替换为父组件状态，并通过props传递数据以便呈现给子组件。

Answer 3

你可以做这样的事情来实现你的目标。创建一个以playerOneName为状态的父组件。将它作为prop组件传递给子组件，并且还有一个函数，可以在子组件中更改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

在React中提升状态

3 个答案: