使用React中父組件中的Button提交表單

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

你的makeActivityInfoUpdateHandler函數是什么樣的？

我假設您通過以下方式完成此操作，並繼續添加更多代碼以使其適用於您：

1 /將ref添加到您的表單，然后您可以訪問父表單（模態）：

<Modal>

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

</Modal>

2 /然后在makeActivityInfoUpdateHandler函數中：

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

}

上面的代碼是你應該做的方式，請在這里發布一些更多的細節，以防這個不起作用！

===========下面的編輯版本 :( 經過與作者的討論，我們一起找到了一個很好的方法！ ）：

現在的想法是將ref放在一個按鈕上（這個按鈕有type="submit" ，它屬於表單），然后當點擊外面的按鈕時，我們只需要調用“ click() ”函數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 2

最簡單的解決方案是使用HTML表單屬性

在表單中添加“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 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");  
}