Question

所以我必须在模态中实现一个表单，如你所见，模态中的按钮不是表单中的按钮。我创建了表单作为模态的子组件。如何使用父组件中的按钮提交表单。我正在使用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>

Answer 1

最简单的解决方案是使用HTML form Attribute

在您的表单中添加“ id”属性：id ='my-form'

<Form id='my-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>

将适当的“表单”属性添加到表单外部所需的按钮：form ='my-form'

<Button positive form='my-form' content='Submit' value='Submit'  />

Answer 2

您的makeActivityInfoUpdateHandler功能是什么样的？

我认为您是通过以下方式完成的，只需继续添加更多代码即可使其适用于您：

1 /将ref添加到您的表单，然后您可以访问父级中的表单（模态）：

<Modal>

    <Modal.Content>
        <ActivityInfoForm ref="activityForm" />
    </Modal.Content>

</Modal>

2 /然后在makeActivityInfoUpdateHandler函数中：

makeActivityInfoUpdateHandler = (activityId) => {
    // ...
    this.refs.activityForm.getWrappedInstance().submit();
    // ...

}

以上代码是您应该采取的方式，请在此处发布更多详细信息，以防万一尚未完成！

=========== 以下版本 :( 与作者讨论后，我们一起找到了一个好方法！）：

现在的想法是将ref放在一个按钮上（此按钮有type="submit"，它属于表单），然后当点击外面的按钮时，我们只需要调用＆＃34; click()＆＃34; ref按钮的功能[这是作者本人的聪明想法]

（实际上，来自semantic-ui的组件是经过修改和改进的版本，不再是标准格式，所以我上面的方法在尝试提交表单时可能无效，但是，以下方式可行）

现在代码如下：

1 /将ref添加到表单上的按钮：

<Form onSubmit={ this.handleSubmit} >
    <button style={{}} type='submit' ref={ (button) => { this.activityFormButton = button } } >Submit</button>
</Form>

2 /然后在makeActivityInfoUpdateHandler函数中，触发上述按钮的click()：

makeActivityInfoUpdateHandler = (activityId) => {
    // ...
    this.activityFormButton.click();
    // ...

}

Answer 3

所选答案很有用。但是其中的方法似乎不再起作用。这是我的处理方法。

您可以在创建子组件时为其提供引用。

<ChildComponent ref={this.childComponent}/>

并在按钮的onClick方法中使用它。（这是按钮的代码）

<Button variant= "light" onClick={this.onClick}>  
    Submit
</Button>

（这是onClick方法）

onClick = (event) => {
    this.childComponent.current.handleSubmit(event);
}

我在子组件中调用了一个名为handleSubmit的方法。看起来可能像这样。

handleSubmit = (event)=> {
    event.preventDefault();

    //Your code here. For example,
    alert("Form submitted");  
}

使用React

3 个答案: