2016-11-10 22 views
0

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

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()}/> 
+1

を行く素晴らしい記事では、明示的にこの 'this.handleChange.bind(この)' 'のようなhandleChange'方法で' this'をバインドする必要があります。これを試してください。それでも問題が解決しない場合は、さらにコードを投稿してください。コード全体をCodepenで試してみてください。 –

+0

@BasimHennawiいいえ、 'createClass'ではありません。 OPが反応成分を「クラス」と使用していた場合、それは問題となる。 –

+0

'this.props.value'はどのように設定されますか? 'myFunc'を使用するコンポーネントを表示できますか? –

答えて

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

+0

良い答え。あなたが深さに入った良いこと –

+0

私はこれを得ると思います。しかし、問題は、これを入力するとすぐに画面上の値を設定することです。つまり、下に表示されたテキストボックスを編集したときにコードペンに表示されます。私は何かもっと欲しい、ユーザーがテキストボックスに数値を入力し、彼らは提出し、その後、私はその提出された値をコード内の他の場所に呼び出すことができます。 –

+0

それは意味がありますか? –

関連する問題