Question

晚安。我如何提交表格以实现。在使用普通jsx时，我通常会执行类似<form onSubmit={handleSubmit}> </form>的操作。但是在像这里https://react-materialize.github.io/#/forms这样的物化实现中，我找不到任何类似组件的东西。因此，我需要在哪里附加我的onSubmit处理程序

Answer 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元素。

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

1 个答案: