这是在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>
    );
  }
}

这是我为你制作的简单片段.