是否可以通过 setState 触发 onChange 事件?
Is it possible to trigger onChange event with setState?
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>
);
}
}
是的,您可以使用 componentDidUpdate 并检查其中的状态,如果条件有效,您可以这样做
var ev2 = new Event('input', { bubbles: true});
input.dispatchEvent(ev2);
其中 input 将是对您要在此处的 refts 上触发事件的元素的引用:
https://reactjs.org/docs/refs-and-the-dom.html
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>
);
}
}
是的,您可以使用 componentDidUpdate 并检查其中的状态,如果条件有效,您可以这样做
var ev2 = new Event('input', { bubbles: true});
input.dispatchEvent(ev2);
其中 input 将是对您要在此处的 refts 上触发事件的元素的引用: https://reactjs.org/docs/refs-and-the-dom.html