相关疑难解决方法(0)

当前行为

<Formik
    isInitialValid
    initialValues={{ first_name: 'Test', email: 'test@mail.com' }}
    validate={validate}
    ref={node => (this.form = node)}
    onSubmitCallback={this.onSubmitCallback}
    render={formProps => {
        const fieldProps = { formProps, margin: 'normal', fullWidth: true, };
        const {values} = formProps;
        return (
            <Fragment>
                <form noValidate>
                    <TextField
                        {...fieldProps}
                        required
                        autoFocus
                        value={values.first_name}
                        type="text"
                        name="first_name"

                    />

                    <TextField
                        {...fieldProps}
                        name="last_name"
                        type="text"
                    />

                    <TextField
                        {...fieldProps}
                        required
                        name="email"
                        type="email"
                        value={values.email}

                    />
                </form>
                <Button onClick={this.onClick}>Login</Button>
            </Fragment>
        );
    }}
/>

我正在尝试此解决方案https://github.com/jaredpalmer/formik/issues/73#issuecomment-317169770但它总是让我返回Uncaught TypeError: _this.props.onSubmit is not a function

当我尝试console.log(this.form)有submitForm功能。 …

所以我必须在模态中实现一个表单,如你所见,模态中的按钮不是表单中的按钮.我创建了表单作为模态的子组件.如何使用父组件中的按钮提交表单.我正在使用React Semantic-UI作为我的UI框架.

我想如果我可以隐藏表单中的按钮并使用JavaScript触发它.我认为这可以通过getElementById来实现,但有没有做出反应的方式呢？

我目前的Modal看起来像这样:

<Modal open={this.props.open} onClose={this.props.onClose} size="small" dimmer={"blurring"}>
    <Modal.Header> Edit Activity {this.props.name} </Modal.Header>
    <Modal.Content>
      <ActivityInfoForm/>
    </Modal.Content>
    <Modal.Actions>
        <Button negative onClick={this.props.onClose}>
            Cancel
        </Button>
        <Button positive
                content='Submit'
                onClick={this.makeActivityInfoUpdateHandler(this.props.activityId)} />
    </Modal.Actions>
</Modal>

我的表单代码如下所示:

<Form>
    <Form.Group widths='equal'>
        <Form.Input label='Activity Name' placeholder='eg. CIS 422' />
        <Form.Input label='Activity End Date' placeholder='Pick a Date' />
    </Form.Group>
    <Form.Group widths='equal'>
        <Form.Input label='Total Capacity' placeholder='eg. 30' />
        <Form.Input label='Team Capacity' placeholder='eg. 3' />
    </Form.Group>
</Form>