상태에서 들어 올리기

Question

나는이 종류의 반응이 있다고 말한다. 이것은 내가 렌더링 할 주요 구성 요소가 아닙니다. UPAARDS 여기에 설정된 상태를 상위 구성 요소로 전달하는 방법은 무엇입니까?

<Player /> 

즉 :

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

나는 부모 구성 요소가 난과 같이 플레이어를 표시 할 것입니다 클래스를 의미 말할 때 부모에게 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)과 같은 작업을 수행하십시오.

플럭스 패턴은 단방향이지만, 스마트 및 벙어리 구성 요소를 처리 할 때 데이터는 바보 구성 요소에서 스마트 구성 요소로 이런 방식으로 전달됩니다. 그것은 완벽하게 받아 들일 수있다. React form!

Answer 3

목표 달성을 위해 다음과 같이 할 수 있습니다. 상태가 playerOneName 인 상위 구성 요소를 만듭니다. 자식 구성 요소에 소품으로 전달하고 자식 구성 요소에서 변경 될 때마다 playerOneName을 변경하는 함수로 전달합니다. 이 아이의 컴포넌트는 모든 변경 사항은 부모 구성 요소에서만 수행하는 playerOneName의 값을 표시처럼

class Parent extends Component { 
    constructor(props){ 
    this.state = { 
     playerOneName: '' 
    } 
    } 
    render() { 
     return(
      <Child 
       playerOneName={this.state.playerOneName} 
       onPlayerOneNameChange={(playerOneName) => this.setState({playerOneName})} 
     /> 
    ); 
    } 
} 

를 사용하여 하위 구성 요소에서이 같은이 기능은 부모 구성 요소에서 playerOneName의 이름을 변경합니다. 당신이 this.state.playerOneName