如何在反应中使用自定义可重用组件作为输入字段

Posted 2023-02-18

【中文标题】如何在反应中使用自定义可重用组件作为输入字段

【英文标题】：How to use custom resuable components as input fields in react

【发布时间】：2021-09-10 04:07:15

【问题描述】：

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

我使用下面的代码

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 我希望两列在同一行中不同。

我得到以下输出

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

如图所示，第一行是

【参考方案1】：

我认为你应该试试这个：

form.jsx:

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

grdiRow.jsx:

<Container>
this.props.child
</Container>