【问题标题】:Is it possible to trigger onChange event with setState?是否可以使用 setState 触发 onChange 事件?
【发布时间】:2019-11-10 20:58:15
【问题描述】:

react onChange 事件是否仅在用户输入输入字段时触发?

我想在表单上设置一个脏标志,这样当用户离开页面时,它会触发一个对话框,询问他是否真的要放弃更改。 isDirty 标志处于我组件的状态,并且在用户输入输入字段时设置。我担心当我使用预定义的输入值在构造函数中初始化状态时,它可能会意外触发 onChange 导致状态更改并导致当用户甚至没有输入字段时将 isDirty 设置为 true。

现在它可以工作了。这是预期的行为吗?我 100% 安全吗?

代码示例:是否有可能通过在构造函数中初始化状态或在按钮 onClick 处理程序中设置状态来触发 handleChange?

class ExampleComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = { exampleInput: "exampleValue" };
    }

    handleChange = (event) => {
      this.setState({
         exampleInput: event.target.value,
      });
    }

    onExampleButtonClick = () => {
      this.setState({
         exampleInput: "buttonClicked",
      })
    }

    render() {
      return (
        <div>
          <input name="exampleInput" value={this.state.exampleInput} onChange={this.handleChange}/>
          <button onClick={this.onExampleButtonClick}>Example Button</button>
        </div>
      );
    }
}

【问题讨论】:

  • 你能添加一些代码示例
  • 添加代码示例

标签: javascript reactjs events state onchange


【解决方案1】:

是的,如果条件有效,您可以使用 componentDidUpdate 并检查其中的状态,您可以执行类似的操作

var ev2 = new Event('input', { bubbles: true});
input.dispatchEvent(ev2);

其中 input 将是您想要触发事件的元素的引用,这里有更多关于 refs 的内容: https://reactjs.org/docs/refs-and-the-dom.html

【讨论】:

  • 所以我们需要一些额外的魔法来实现它,对吗? onChange 不会通过使用受控组件触发......好吧只有setState,否则会导致无限循环?我只是想确保在创建组件时仅调用 setState 或在构造函数中初始化状态不会触发此事件是预期的行为
  • 无论如何,如果您以编程方式从另一个地方更改其绑定状态,onChange 事件不应触发,我可能误解了您的问题
  • 你是对的,但是我已经在 onChange 事件中设置了脏标志并且我得到了结果(我的标志仅在我从键盘键入时设置为 true)。我只是想知道它是否安全(如果除了打字之外的任何东西都能够触发输入的handleChange,即通过setState初始化状态或设置状态)
  • 是的,它应该是安全的 :).. 如果这对您有帮助,请标记答案
猜你喜欢
  • 2015-11-02
  • 2019-02-28
  • 2016-01-14
  • 2017-11-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多