onSubmit 事件处理程序在 Reactjs 表单中不起作用

Question

我是新来的反应并有这种形式：

class CustomForm extends React.Component {

    handleFormSubmit = (e) => {
        e.preventDefault();
        const title = e.target.elements.title.value;
        const content = e.target.elements.content.value;
        console.log(title, content)
    }

    render() {
        return (
            <div>
                <Form onSubmit={ this.handleFormSubmit }>
                    <FormItem label='Title'>
                        <Input name='title' placeholder='Put a title here' />
                    </FormItem>
                    <FormItem label='Content'>
                        <Input name='content' placeholder='Enter some content' />
                    </FormItem>
                    <FormItem>
                        <Button type='primary' htmlType='submit'>Submit</Button>
                    </FormItem>
                </Form>
            </div>
        )
    }
}

该表单未在控制台日志中提交任何内容/没有任何内容。 我用onSubmitCapture试过了，这似乎有效。 我该如何解决？

Answer 1

从您的代码看来，您正在使用一些自定义组件<Form> .. 这不是正常的<form>因为自定义<Form>组件可能没有道具onSubmit 。 Go 通过您正在使用的组件的文档。

Answer 2

type='submit'按钮将触发表单onSubmit Handler

Answer 3

您需要在构造函数中绑定事件处理程序才能工作。 在这里阅读更多https://reactjs.org/docs/handling-events.html ：

class CustomForm extends React.Component {    
    constructor(props) {
     super(props)

      this.handleFormSubmit = this.handleFormSubmit.bind(this)
     }

    handleFormSubmit = (e) => {
        e.preventDefault();
        const title = e.target.elements.title.value;
        const content = e.target.elements.content.value;
        console.log(title, content)
    }

    render() {
        return (
            <div>
                <Form onSubmit={ this.handleFormSubmit }>
                    <FormItem label='Title'>
                        <Input name='title' placeholder='Put a title here' />
                    </FormItem>
                    <FormItem label='Content'>
                        <Input name='content' placeholder='Enter some content' />
                    </FormItem>
                    <FormItem>
                        <Button type='primary' htmlType='submit'>Submit</Button>
                    </FormItem>
                </Form>
            </div>
        )
    }
}