リアクトで状態を持ち上げる

Question

私はこのリアクションクラスを持っていると言っています。これは私がレンダリングしている主なコンポーネントではありません。ここでUPWARDSで設定した状態iを親コンポーネントに渡すにはどうしたらいいですか？

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

の場合「持ち上げ状態をアップ」は、子コンポーネントのデータを親コンポーネントの状態に置き換え、子コンポーネントが子コンポーネントにデータを渡す必要があることを意味します。

Answer 2

こんにちは、ここでのポイントは、親コンポーネントから子コンポーネントに基本的に渡されることです。これは、関数である小道具です。親で

：

変更はあなたの子コンポーネントで行わ

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

、あなたは、関数を呼び出し、入力として新しい値を渡します。このようにして、子コンポーネントの関数を呼び出して、親コンポーネントの状態を変更します。

あなたの場合、playerOneNameの状態を設定する代わりに、このクラスの親からの関数を渡して、 'selectPlayOne'関数にthis.props.functionFromParent(playerOneName)のようなものを実行します。

磁束パターンは単方向ですが、スマートとダムのコンポーネントを扱う場合、このようにダムコンポーネントからスマートコンポーネントにデータが渡されることがわかります。それは完全に受け入れられます反応形式！

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)} 
    /> 
); 
} 

あなたはthis.state.playerOneName