Question

我有一个由一个输入组成的表单，我想切换它。单击div时显示表单，我想在div外单击时隐藏表单。我如何在React中做到这一点？

class InputToggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showInputForm: false
    };
  }
  onClickAction(e) {
    e.preventDefault();
    this.setState({ showInputForm: true });
  }
  render() {
    if (this.state.showInputForm) {
      return (<input type="text" />)
    }
    return (
      <div onClick={this.onClickAction.bind(this)}>
        <h1>value</h1>
      </div>
    );
  }
}

如何在showInputForm之外的点击上将状态div设置为false？

Answer 1

您必须在input元素上使用onBlur事件侦听器。见代码：

class InputToggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showInputForm: false
    };
  }
  onClickAction(e) {
    e.preventDefault();
    this.setState({ showInputForm: true });
  }
  componentDidUpdate() {
    if (this.state.showInputForm) {
      this.input.focus();
    }
  }
  render() {
    if (this.state.showInputForm) {
      return (
        <input
          ref={(el) => this.input = el}
          onBlur={() => this.setState({ showInputForm: false })}
          type="text" />
      );
    }
    return (
      <div onClick={this.onClickAction.bind(this)}>
        <h1>value</h1>
      </div>
    );
  }
}

请注意，我必须在渲染时聚焦输入。如果输入未处于焦点，则不会触发onBlur事件。

见工作pen。

在onlclick div之外点击隐藏表单输入

1 个答案: