javascript - ReactJS 清除来自父组件的输入

Question

我正在自学如何使用一个 super 简单的应用程序使用react，该应用程序要求用户键入 UI 中显示的单词。如果用户输入正确，应用程序会显示另一个词，依此类推。

我几乎可以正常工作了，除了一件事:正确输入单词后，我需要清除输入元素。我在这里看到了几个关于输入元素如何清除自身的答案，但我需要从包含它的组件中清除它，因为这是检查输入的地方......

// the app
class AppComponent extends React.Component {
    constructor() {
      super();
      this.state = {
        words: ['alpha', 'bravo', 'charlie'],
        index: 0
      };
    }
    renderWordsource() {
      const word = this.state.words[this.state.index];
      return <WordsourceComponent value={ word } />;
    }
    renderWordinput() {
      return <WordinputComponent id={1} onChange={ this.onChange.bind(this) }/>;
    }
    onChange(id, value) {
        const word = this.state.words[this.state.index];
        if (word == value) {
            alert('yes');
            var nextIndex = (this.state.index == this.state.words.count-1)? 0 : this.state.index+1;
            this.setState({ words:this.state.words, index:nextIndex });
        }
    }
    render() {
      return (
        <div className="index">
          <div>{this.renderWordsource()}</div>
          <div>{this.renderWordinput()}</div>
        </div>
      );
    }
}

// the input component
class WordinputComponent extends React.Component {
    constructor(props) {
        this.state = { text:''}
    }
    handleChange(event) {
      var text = event.target.value;
      this.props.onChange(this.props.id, text);
    }
    render() {
      return (
        <div className="wordinput-component">
          <input type="text" onChange={this.handleChange.bind(this)} />
        </div>
      );
    }
}

看到它在哪里说 alert('yes') 了吗？这就是我认为应该清除 value 的地方，但这没有任何意义，因为它是一个参数，而不是组件的真正状态。我应该让组件将自身传递给更改功能吗？也许那时我可以改变它的状态，但这听起来像是一个糟糕的设计主意。

Answer 1

执行此操作的 2 种常见方法是通过父级中的状态控制值或使用 ref 清除值。添加了两者的示例

第一个是使用 ref 并在子组件中放置一个函数来清除第二种是使用父组件的状态和一个受控的输入字段来清除它

class ParentComponent1 extends React.Component {
  state = {
    input2Value: ''
  }
  clearInput1() {
    this.input1.clear();
  }
  clearInput2() {
    this.setState({
      input2Value: ''
    });
  }
  handleInput2Change(evt) {
    this.setState({
      input2Value: evt.target.value
    });
  }
  render() {
    return (
      <div>
        <ChildComponent1 ref={input1 => this.input1 = input1}/>
        <button onClick={this.clearInput1.bind(this)}>Clear</button>
        <ChildComponent2 value={this.state.input2Value} onChange={this.handleInput2Change.bind(this)}/>
        <button onClick={this.clearInput2.bind(this)}>Clear</button>
      </div>
    );
  }
}

class ChildComponent1 extends React.Component {
  clear() {
    this.input.value = '';
  }
  render() {
    return (
      <input ref={input => this.input = input} />
    );
  }
}

class ChildComponent2 extends React.Component {
  render() {
    return (
      <input value={this.props.value} onChange={this.props.onChange} />
    );
  }
}

ReactDOM.render(<ParentComponent1 />, document.body);

<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>