我在这里有一种情况,我创建了一个可重用的组件,该组件负责创建输入字段和标签。我想在整个过程中使用此组件来构建一个完整的表单,该表单具有单行和两列(使用此自定义输入字段)
我使用以下代码
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 我希望两列在同一行中不同。
我得到以下输出
以下是所需的输出。我怎样才能得到这个输出
如图所示,第一行是