首页 文章

如何在react-materialize中提交表单？

提问于
浏览 次
0

美好的一天 . 如何在react-materialize中提交表单 . 使用普通的jsx时我通常会做这样的事情 <form onSubmit={handleSubmit}> </form> . 但是像在这里反应物化一样https://react-materialize.github.io/#/forms我找不到像组件这样的东西 . 那么，我需要在哪里附加我的onSubmit处理程序

reactjs

1 回答

  • 1

    因此，您可以像处理任何其他输入那样处理这些输入，将它们包装在 <form> 中并监听 onSubmit 事件 . 这是一个最小的工作示例：

    <form
    onSubmit={e => {
        e.preventDefault();
        this.handleSubmit()
    }}
>
    <Row>
        <Input
            s={6}
            label="First Name"
        />
        <Button>hello</Button>
    </Row>
</form>

    请注意以下几点：

    • 我正在做 e.preventDefault() ，以阻止表单刷新页面 . 另一种方法是传递事件，如：

    <form onSubmit={e => this.handleSubmit(e)}>

    然后像这样在 handleSubmit 函数内阻止它：

    handleSubmit = e => {
  e.preventDefault();
  // other code
}
    • 我在这里根本没有检查输入值 . 您可以将 onChange 事件侦听器附加到所有输入，并使它们在每次输入更改时更新状态 . 然后，您的 handleSubmit 可以在提交表单时从状态读取输入值 .

    <Input s={6} label="First Name" onChange={e => this.setState({inputValue: e.currentTarget.value})} />

    在这种情况下， handleSubmit 函数可以访问 this.state.inputValue 中的值 .

    这与实现完全无关，以及您通常如何处理表单 . 它们似乎没有提供特定的 <Form> 组件，因此您可以使用基本的html元素进行一些修改 .

    回复于

相关问题