データバインディングの反応

Question

こんにちは私は反応するのが新しく、どのようにデータ結合が反応するのかを理解するのが難しいです。私はAngularJSでデータバインディングを行っていますが、reactjsではもっと複雑に思えます。私が何をしたいか

は、私は、入力フィールドにテキストを入力するとき、それは別の場所にリアルタイムで表示されますです。

は、これは私がこの入力フィールドに何かを入力したとき、私はこれを行うことができますelse.Howどこだから、いくつか表示されます私の入力

<div className="post_input"> 

    <input className='post_data_input_overlay' placeholder="Ask your question here" ref="postTxt"/> 

</div> 

のですか？

Answer 1

controlled inputを使用すると、データのバインドが可能です。制御入力は、値をstate variableおよびonChangeイベントにバインドして、入力値が変化すると状態を変更することによって実現されます。

は、あなたがコントロールのイベントハンドラから状態を更新するコンポーネントに機能を呼び出す必要があなたの状態にコントロールをバインドするには

class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = {value : ''} 
 
    } 
 
    handleChange = (e) =>{ 
 
    this.setState({value: e.target.value}); 
 
    } 
 
    render() { 
 
    return (
 
    <div> 
 
     <input type="text" value={this.state.value} onChange={this.handleChange}/> 
 
     <div>{this.state.value}</div> 
 
    </div> 
 
    ) 
 
    } 
 
} 
 
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 
<div id="app"></div>

Answer 2

要するに、Reactでは、双方向データバインディングはありません。

あなたは、その機能を実装stateを定義してみてください、そして、このように書き、イベントをリスニング、状態を更新し、反応するようにしたいあなたのためのレンダリング：

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

    this.handleChange = this.handleChange.bind(this); 
    } 

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

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

詳細はこちらhttps://facebook.github.io/react/docs/forms.html

実際には双方向バインディングで書こうとする人がいますが、Reactはそのようには機能しません。あなたがそのように書きたいならば、あなたはこのように、リアクトのためのアドオンを使用する必要があります。ここにhttps://facebook.github.io/react/docs/two-way-binding-helpers.html

refsについては

var WithLink = React.createClass({ 
    mixins: [LinkedStateMixin], 
    getInitialState: function() { 
    return {message: 'Hello!'}; 
    }, 
    render: function() { 
    return <input type="text" valueLink={this.linkState('message')} />; 
    } 
}); 

詳細は、それだけで、開発者がでDOMに到達することを可能にするソリューションですコンポーネントのメソッドについては、こちらを参照してください。https://facebook.github.io/react/docs/refs-and-the-dom.html

Answer 3

以下のスニペットを参照してください。

すべてのフォームフィールドの更新機能を持っているのではなく、あなたはES6計算名機能を使用して、一般的な更新機能を作成し、このような制御から、それをそれがインライン必要な値を渡すことができます。

class LovelyForm extends React.Component { 
 
    constructor(props) { 
 
    alert("Construct"); 
 
    super(props); 
 
    this.state = { 
 
     field1: "Default 1", 
 
     field2: "Default 2" 
 
    }; 
 
    } 
 

 
    update = (name, e) => { 
 
    this.setState({ [name]: e.target.value }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <form> 
 
     <p><input type="text" value={this.state.field1} onChange={(e) => this.update("field1", e)} /> 
 
      {this.state.field1}</p> 
 
     <p><input type="text" value={this.state.field2} onChange={(e) => this.update("field2", e)} /> 
 
      {this.state.field2}</p> 
 
     </form> 
 
    ); 
 
    } 
 
} 
 
ReactDOM.render(<LovelyForm/>, document.getElementById('example'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="example"></div>