は、私はこのコードを持って反応するクラス持っ

Question

を反応させる：

myFunc: function() { 
    this.setState({info: true}) 
    let name = this.props.value; 
    console.log(name) --> returns undefined 
    }, 

にはどうすればいいように名前を付けることができます別のものでは

getInitialState: function(){ 
    return { 
     results: false, 
     value: '' 
    }; 
    }, 

    handleClick: function(event) { 
    this.setState({ results: true }); 
    event.preventDefault(); 
    }, 

    handleChange: function(event){ 
    this.setState({value: event.target.value}) 
    }, 

    <input type="text" id="playerName" value={this.state.value} onChange={this.handleChange} placeholder="name" /> 

を私が持っているCLASS

をREACT 1つの反応クラスから別の反応クラスにそれを渡すことによってユーザーが入力した名前と同じです。

投稿可能私は小道具があなたが必要とするコードを他の場所に渡す方法だと考えました。ここに呼ば

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