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。

这是在React中清理输入的正确方法吗？

1 个答案: