는 유성 ​​유성 1.3을 사용하여 여러 구성 요소

Question

의 수정 상태 반응 반작용, 나는 다음과 같은 주요 구성 요소를했습니다

export default class Option extends Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     disabled: false 
    }; 
    } 

    vote() { 
    this.setState({ disabled: true }); 
    } 

    renderButton() { 
    return this.state.disabled ? 'btn btn-success' : 'btn btn-default'; 
    } 

    render() { 
    return (
     <li> 
     <button disabled={ this.state.disabled ? 'disabled' : '' } type="button" className={this.renderButton()} onClick={this.vote.bind(this)}> 
      Vote 
     </button> 
     <span> { this.props.option.text }</span> 
     </li> 
    ); 
    } 
} 

Option.PropTypes = { 
    option: PropTypes.object.isRequired 
}; 

어떻게 할 수 구성 요소의 vote() 메서드를 호출하는 버튼을 클릭 할 때 각 버튼의 disabled 상태가 true으로 설정되어있는 경우 Show 구성 요소가 렌더링하는 옵션 중 하나를 선택하면됩니까? 기본적으로 사용자가 클릭 할 수있는 몇 개의 버튼을 렌더링하고 하나를 클릭하면 다른 모든 버튼을 비활성화하려고합니다. 따라서 클릭 할 때 모든 버튼의 상태를 disabled으로 설정해야합니다.

Answer 1

이것은 유성 질문보다 더 중요한 질문이지만, 당신이해야 할 일은 부모 구성 요소에 함수를 선언 한 다음 하위 구성 요소에 소품으로 전달하는 것입니다. 그런 다음 하위 구성 요소 내에서 this.props.funcName을 사용하여 해당 함수를 호출 할 수 있습니다.

예를 들어, Show 구성 요소 (또는 다른 구성 요소에 영향을 미치는 경우 상위 구성 요소)에 상태를 선언 한 다음 상위 구성 요소의 상태를 업데이트하는 함수를 전달할 수 있습니다. 그러면이 상태가 소품으로 Option 구성 요소로 전달됩니다.

확실하지 않은 경우 알려주세요.