React onChangeが設定されていますが、まだ入力は読み取り専用です

Question

ReactJsのフォームを作成中です。入力フィールドにstateの値を入力しています。 しかし、私の入力フィールドは読み取り専用として作成されています。私はonChange関数を設定します。

handleNameChange(event) { 
    myEvent.name = event.target.value; 
}  

render(){ 
    return( 
     <input type="text" id="eventName" className="form-control" onChange={this.handleNameChange.bind(this)} value={this.state.name}/> 
    ); 
} 

この動作はわかりません。誰かが説明できますか？ありがとう

Answer 1

Reactのコンポーネントの状態を変更するには、this.setStateを使用する必要があります。このメソッドを呼び出すと、設定した新しいデータでコンポーネントが再描画されます。ここでsetStateを使用して、あなたの例です：あなたは、テキストフィールドの値を格納する状態変数を使用しているが、あなたはそのせいで、あなたのテキストのため、onChangeイベントで値を更新していないです

class Example extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { name: 'Harambe' }; 
 
    this.handleNameChange = this.handleNameChange.bind(this); 
 
    } 
 

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

 
    render() { 
 
    console.log(this.state); 
 
    return( 
 
     <input type="text" id="eventName" className="form-control" onChange={this.handleNameChange} value={this.state.name}/> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Example/>, document.getElementById('View'));

<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="View"></div>

Answer 2

理由フィールドは読み取り専用です。試してみてください：

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

render(){ 
    return( 
     <input type="text" id="eventName" className="form-control" onChange={this.handleNameChange.bind(this)} value={this.state.name}/> 
    ); 
}