在React中提升状态

说我有这个React类。这不是我正在渲染的主要组件。我怎么能把我在这里设置的状态传递给父组件。在React中提升状态

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？

来源

2017-09-29 The Walrus

阵营喜欢使用更新playerOneName本质上是单向的。你不能或者我应该说你不应该将状态从小孩传递给父母。为此，您必须使用redux或助焊剂。 –

@ShubhamJain什么是提升状态呢？ –

@TheWalrus这部分'onChange = {this.selectPlayerOne}'是您需要更改的内容，您应该将更改回调作为父项的属性传递。 –

“提升状态了”为阵营意味着你应该从你的孩子组件父组件状态替换数据，并通过道具演示数据传递到子组件。

来源

2017-09-29 08:51:08

嘿所以这里的重点是，你基本上是从你的父组件进入你的子组件，这是一个函数的道具。

在父：

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

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

在你的情况下，你希望不是设置playerOneName的状态，而是从这个类的父类中传入一个函数，并在你的'selectPlayOne'函数中执行类似this.props.functionFromParent(playerOneName)的操作。

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

来源

2017-09-29 09:12:17

你可以做这样的事情来实现你的目标。创建一个父组件，其中包含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)} 
    /> 
); 
}

通过这个你可以在你的父组件，只要你使用this.state.playerOneName

来源

2017-09-29 12:02:14

在React中提升状态

回答

相关问题