ng-modelと同等の反応

Question

私は、値をバインドしたいTextFieldを持っています。ユーザーがTextFieldに値を入力し、TextFieldを更新する場合は値を変更します。いくつかのAPI呼び出しによって値が変化します。

これを行う方法はありますか？

Answer 1

stateとonChangeを使用してこれを行うことができます。簡単な例は以下を含む：

<TextField 
    onChange={(name) => this.setState({name})} 
    value={this.state.name} 
/> 

変数に基づいTextInput更新するためのガイドがlocated in the docsです。

Answer 2

リアクトでこれを行う方法はstateです。 JSXの例は次のとおりです。

import React from 'react'; 

export default class MyForm extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     text: 'default', 
     text2: 'default' 
    } 
    } 

    onChange(e) { 
    var obj[e.target.name] = e.target.value 
    this.setState(obj); 
    } 

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