react.jsの小道具を通してユーザー入力値を渡します

Question

私は2つのコンポーネントを持っていますが、どのようにしてonChangeを通じてユーザー入力値を親コンポーネントに渡すのですか？私はonChangeに 'トリガー'を渡すことができますが、値を渡す方法は？

https://jsfiddle.net/gboaxm30

var InputComp = React.createClass({ 
    render: function() { 
    return (
    <div> 
    <input type="text" onChange={this.props.newVal} /> 
    </div> 
    ); 
    } 
}); 

var App = React.createClass({ 
    getInitialState(){ 
    return { 
    inputVal: 0 
    } 
    }, 
    inputChangedHandler(props) { 
    //set user changed value to inputVal 
    console.log(props) 
    }, 
    render() { 
    return(
    <div> 
     <InputComp newVal={this.inputChangedHandler}/> 
     <h4>{this.state.inputVal}</h4> 
     </div> 
    ) 
    } 
}) 

ReactDOM.render(
    <App />, 
    document.getElementById('container') 
); 

Answer 1

あなたは

inputChangedHandler(e) { 
     //set user changed value to inputVal 
     console.log(e.target.value) 
    }, 

Answer 2

は、子コンポーネントのonChangeイベントに関数を呼び出した後、e.target.valueのように入力の値にアクセスしてから渡すイベントから値を取る必要がありますそれは親コンポーネントにthis.props.newVal(e.target.value);

var InputComp = React.createClass({ 
    handleChange(e) { 
    this.props.newVal(e.target.value); 
    }, 
    render: function() { 
    return (
    <div> 
    <input type="text" onChange={this.handleChange} /> 
    </div> 
    ); 
    } 
}); 

var App = React.createClass({ 
    getInitialState(){ 
    return { 
    inputVal: 0 
    } 
    }, 
    inputChangedHandler(val) { 
    console.log(val); 
    this.setState({inputVal: val}); 
    }, 
    render() { 
    return(
    <div> 
     <InputComp newVal={this.inputChangedHandler}/> 
     <h4>{this.state.inputVal}</h4> 
     </div> 
    ) 
    } 
}) 

ReactDOM.render(
    <App />, 
    document.getElementById('container') 
); 

JSFIDDLE

Answer 3

私はここにあなたのためのデモを行った。http://codepen.io/PiotrBerebecki/pen/pEAQzV

アイデアが反応ドキュメントで定義されている、いわゆる制御された入力を使用することです：https://facebook.github.io/react/docs/forms.html#controlled-components

var InputComp = React.createClass({ 
    getInitialState() { 
    return { 
     userInput: '' 
    }; 
    }, 

    onChange(event) { 
    this.setState({ 
     userInput: event.target.value 
    }); 
    this.props.newVal(event.target.value); 
    }, 

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




var App = React.createClass({ 
    getInitialState() { 
    return { 
    inputVal: '' 
    }; 
    }, 

    inputChangedHandler(valueFromChild) { 
    console.log('valuefromChild:', valueFromChild); 
    this.setState({ 
     inputVal: valueFromChild 
    }); 
    }, 

    render() { 
    return (
     <div> 
     <InputComp newVal={this.inputChangedHandler}/> 
     <h4>{this.state.inputVal}</h4> 
     </div> 
    ); 
    } 
}) 

ReactDOM.render(
    <App />, 
    document.getElementById('container') 
);