在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中提升狀態

回答

相關問題