전달 입력 상태는 주위에서

Question

나는이 코드를 가지고 반응 클래스는 한 반응 하나의 반응 클래스에서 다른 반응 클래스로 전달하여 사용자가 입력 한 이름과 같습니다.

mo를 게시 할 수 있습니다. 코드를 다시 작성했지만 소품이 다른 곳에 필요한 코드를 전달하는 방법이라고 생각했습니다. 여기라는

MYFUNC :

<input type="submit" value="I can play" onClick={() => this.myFunc()}/> 

Answer 1

일이 가장 쉬운 방법은 컨테이너 요소를 가지고있다,이 컨테이너 구성 요소는 모든 상태 관리를 처리하고 랩 어라운드 것 this.state.value은 정의되지 않은

편집을 반환 하위 구성 요소 :

<WrapperComponent> 
<Input/> 
<Info /> 
</WrapperComponent 

사용자가 입력을 거부하는 등의 작업을 수행하려는 경우 입력 내용을 그대로 유지할 수 있지만 래퍼 구성 요소는 자체 상태를 설정하는 고유 한 기능을 가지며 입력이 새로운 값으로 호출 될 수 있도록 해당 함수를 입력으로 전달한 다음 래퍼 구성 요소가 업데이트되고 Info 구성 요소가 래퍼 구성 요소와 모든 것이 동기화됩니다. 여기

은 분명히 쉽게 ES6 버전을 사용하지 않는 createClass 버전을 사용하여이 변환 할 수 있습니다

class Wrapper extends React.Component {  
    constructor() { 
    super(); 
    this.state = { 
     value: 'default' 
    } 
    } 

    _handleChange = (value) => { 
    this.setState({value: value}) 
    }; 

    render() { 
    return (
     <div> 
     <Input onChange={this._handleChange} value={this.state.value}/> 
     <Info value={this.state.value} /> 
     </div> 
    ) 
    } 
} 

class Input extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     value: props.value 
    } 
    } 

    onChange = (e) => { 
    this.setState({value: e.target.value}); 
    this.props.onChange(e.target.value); 
    }; 

    render() { 
    return <input type="text" value={this.state.value} onChange={this.onChange} /> 
    } 
} 

const Info = (props) => { 
    return (
    <h1> {props.value} </h1> 
) 
} 


ReactDOM.render(<Wrapper />,document.getElementById('app')); 

http://codepen.io/finalfreq/pen/VKPXoN을 codepen 예입니다. 여기서 가장 중요한 점은 직접 관련이없는 구성 요소에 걸쳐 값을 공유하려는 경우 모든 것을 처리하는 상태 컨테이너 구성 요소가 필요하다는 것입니다. 여기

는 https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0