我正在尝试在 react.js 中创建一个表单,用户可以在其中单击两个不同的按钮来执行两个不同的操作。在我的例子中,表单应该允许用户选择一个文档并替换当前文档(第一个按钮)或附加到它(第二个按钮)。是否有可能以单一形式实现这一点?
我以为我可以使用 onSubmit 函数中的“事件”参数检测应用了哪个按钮,但没有成功。我还考虑过使用对输入和普通按钮的引用来重新创建一个伪表单,但如果存在更简洁的解决方案,我宁愿不使用这样的 hack。
预先感谢您的帮助!
注意:我发现了一些与多个提交按钮相关的问题(例如 here 和 here),但没有一个涉及 react.js 解决方案。
最佳答案
试试这个。它将使用“handleSubmit”函数处理常规提交(通过按钮或按回车键),并使用“handleAlternate”处理替代提交(通过另一个按钮)。
功能组件:
const Example = () => {
const handleSubmit = (event) => {
event.preventDefault();
....
}
const handleAlternate = (event) => {
event.preventDefault();
...
}
return (
<form onSubmit={handleSubmit}>
...
<button type="submit">Submit</button>
<button onClick={handleAlternate}>Alternate</button>
</form>
)
}
类组件:
class Example extends React.Component {
handleSubmit(event) {
event.preventDefault();
....
}
handleAlternate(event) {
event.preventDefault();
...
}
render() {
<form onSubmit={this.handleSubmit.bind(this)}>
...
<button type="submit">Submit</button>
<button onClick={this.handleAlternate.bind(this)}>Alternate</button>
</form>
}
}
正如 Alexis 指出的那样,实际声明第二个按钮的类型可能更正确(但 IMO 的可读性较差),因为默认情况下是提交表单按钮:
<form onSubmit={handleSubmit}>
....
<button>Submit</button>
<button type="button" onClick={handleAlternate}>Alternate</button>
</form>
关于javascript - 如何在 react.js 表单中创建多个提交按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37462047/