Reactで入力を消去する正しい方法はありますか？

Question

<input 
    id='block-input' 
    type='text' 
    ref={(input) => {this.blockInput = input;}} /> 
this.blockInput.value = ''; 

このように仮想DOMまたは本物を変更しますか？どのように正しい？

Answer 1

あなたのやっていることはお勧めできません。

制御された入力を行うとよいでしょう。それを実現するには、する必要があります。

• は

• 入力の値の入力の変更を処理するためのハンドラ関数を状態を提供します。したがって、入力が変更されるたびに、状態が更新されます。例えば

：ここ

App.js

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     name: '' 
    } 
    } 
    handleChange = event => { 
    this.setState({ 
     name: event.target.value 
    }); 
    } 
    resetInput =() => { 
    this.setState({ name: '' }); 
    } 
    render() { 
    const { name } = this.state; 
    return (
     <div> 
      <input type="text" value={name} onChange={this.handleChange} /> 
      <p>Hello, {name}</p> 
      <button onClick={this.resetInput}>Reset</button> 
     </div> 
    ); 
    } 
} 

はsimple snippet I made for youです。