0

我在这里有一种情况,我创建了一个可重用的组件,该组件负责创建输入字段和标签。我想在整个过程中使用此组件来构建一个完整的表单,该表单具有单行和两列(使用此自定义输入字段)

我使用以下代码

Form.jsx
    <GridRow>
      <InputField type="text"label="First Name"/>
       <InputField type="text"label="Last Name" />
    </GridRow>

GridRow.jsx
    
    render() {
            return (
                <div>
                    <Container>
                        <Row>
                            <Col sm={6}>  
                            {this.props.children}
                            </Col>
                            <Col sm={6}>
                            {this.props.children}
                           </Col>
                        </Row>
                    </Container>
                </div>
            );

Inputfield.jsx
    const InputField = ({label, type}) => (
        <div>
          {label}
            <input
                type={type}     
                style={{ padding: "4px", border: "none", borderBottom: "1px solid #ccc", width: "90%"}}
            />
        </div>
    );

这里 Form.jsx 使用 GridRow.jsx 作为组件,它有一个子组件 inputfield.jsx 我希望两列在同一行中不同。

我得到以下输出

在此处输入图像描述

以下是所需的输出。我怎样才能得到这个输出

在此处输入图像描述

如图所示,第一行是

4

1 回答 1

0

我认为你应该试试这个:

form.jsx

<Row>
<Col><input /></Col>
<Col><input /></Col>
</Row>

grdiRow.jsx

<Container>
{this.props.child}
</Container>
于 2021-06-27T17:05:47.397 回答