React-Bootstrap: 如何提交横向表单？

Question

我已经创建了一个 react-bootstrap 传统的垂直表单，它可以完美地工作并且像它设计的那样在点击时提交。

    onSubmit = (e) => {
        e.preventDefault();
        const { name, price, quantity } = this.state;

        const newItem = {
            name,
            price,
            quantity,
        };

        axios.post('/', newItem
        .then(
            (res) => {
                alert('Submitted successfully!');
                const clearState = {
                    name,
                    price,
                    quantity,
                };
                this.setState(clearState);
            },
            (err) => {
                alert('An error occured! Try submitting the form again.', err);
            }
        );
    };

    render() {
        return (
            <div>
                     <Form horizontal onSubmit={this.onSubmit}>
                <FormGroup controlId="formHorizontalEmail">
                  <Col smOffset={4} sm={10}>
                    <FormControl
                      type="Text"
                      placeholder="name"
                      name="name"
                      value={this.state.name}
                      onChange={this.onChange}
                    />
                  </Col>
                </FormGroup>
                <FormGroup controlId="formHorizontalPassword">
                  <Col smOffset={4} sm={10}>
                    <FormControl
                      type="number"
                      placeholder="Enter cost of item"
                      name="price"
                      value={this.state.price}
                      onChange={this.onChange}
                    />
                  </Col>
                </FormGroup>
                <FormGroup controlId="formHorizontalPassword">
                  <Col smOffset={4} sm={10}>
                    <FormControl
                      type="number"
                      placeholder="Enter quantity"
                      name="quantity"
                      value={this.state.quantity}
                      onChange={this.onChange}
                    />
                  </Col>
                </FormGroup>
                <FormGroup>
                  <Col smOffset={5} sm={4}>
                    <Button type="submit" bsStyle="primary">
                      Submit
                    </Button>
                  </Col>
                </FormGroup>
                </Form>
            </div>
        );
    }
}

但是，当我尝试通过向表单包装器添加 Row 将其更改为水平表单时，如下所示：

<div>
    <Form.Row horizontal onSubmit={this.onSubmit}>

// rest of the code here

</Form.Row>

````

My submit button doesn't work, nothing happens, I know am doing something wrong but can't figure it out

Answer 1

Form.Row 使用 class form-row 呈现 div 元素 - 它不是表单元素。这就是为什么您的提交不起作用。

更多信息在这里：https://react-bootstrap.github.io/components/forms/#form-row-props

React-Bootstrap: 如何提交横向表单？

React-Bootstrap: How to submit horizontal form?

reactjs

react-bootstrap-table