0

说我有这个 React 类。这不是我要渲染的主要组件。如何将我在此处设置的状态 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 可供父母使用？

4

3 回答 3

1

嘿，这里的重点是，您基本上是从父组件传入子组件，这是一个函数。

在父母中：

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

当您的子组件发生更改时，您调用该函数并将新值作为输入传递。这样您就可以在子组件中调用该函数，并对父组件的状态进行更改。

在您的情况下，您不想设置 playerOneName 的状态，而是从此类的父级传入一个函数，并this.props.functionFromParent(playerOneName)在您的“selectPlayOne”函数中执行类似的操作。

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

于 2017-09-29T09:12:17.330 回答
0

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

于 2017-09-29T08:51:08.713 回答
0

你可以做这样的事情来实现你的目标。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

于 2017-09-29T12:02:14.387 回答