Javascript 使用React中父组件中的按钮提交表单

所以我必须在模态中实现一个表单，正如你所看到的，模态中的按钮不是表单中的按钮。我将表单创建为模态的子组件。如何使用父组件中的按钮提交表单。我使用react作为我的UI框架

我想如果我可以在表单中隐藏按钮并使用JavaScript触发它。我认为这可以通过getElementById实现，但是有没有一种方法可以实现呢

我当前的模式如下所示：

<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>

编辑活动{this.props.name}
取消

我的表单代码如下所示：

<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>

---

您的

使ActivityInfoUpdateHandler

函数看起来像什么

我假设您是通过以下方式完成的，只需继续添加更多代码即可：

1/将

ref

添加到表单中，然后您可以在父级（模式）中访问表单：

上面的代码是你应该做的，请在这里发布更多的细节，以防这还不起作用

=========== 以下编辑版本：（与作者讨论后，我们一起找到了一个好办法！）：

现在的想法是把

ref

放在一个按钮上（这个按钮有

type=“submit”

，它属于表单），然后当外部的按钮被点击时，我们只需要调用

ref

按钮的“

click（）

”函数[这是作者自己的聪明想法]

（实际上，semantic ui中的组件是一个经过修改和改进的版本，不再是标准表单，因此我前面的方法在尝试提交表单时可能不起作用，但是，下面的方法会起作用）

代码现在看起来像：

1/将

ref

添加到表单上的按钮：

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

---

最简单的解决办法是使用

在表单中添加“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>

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

将适当的“form”属性添加到表单外部所需的按钮：form='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>

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

---

选择的答案很有用。但其中的方法似乎不再有效。我是这样做的

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

<ChildComponent ref={this.childComponent}/>

我正在调用子组件handleSubmit中的一个方法。它可以像这样

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

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

---

如果你想用react方式来做，你应该把输入值存储在某个地方（例如

state

，

redux form

），这样你就可以在以后得到它们。这个函数实际上只是一个等待填充的骨架函数。它似乎不起作用，也不会给我任何错误，它们实际上是Semantic UI React中的一个组件，可以在这里找到。实际上，我猜Semantic UI React以不同的方式处理它们的表单，我将尝试另一种方式，并很快更新以前的答案，请稍候。但是，提交表单时将执行哪些操作？表单组件是否有handleSubmit（）函数？如果是，您能console.log并在您提交的表单中查看一些值吗？让我们来看看。漂亮优雅的解决方案+1我必须设置按钮type='submit'才能使其工作，很好的发现！最好的解决方案，这是伟大的+1.

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

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