在 react-admin 中并排输入

Question

我想并排放置 3 个输入。我有如下代码，在每次迭代中我都希望并排放置三个组件。可能吗？

{
    this.state.features.length > 0 ?
        this.state.features.map((feature) => {
            return (
                <div>
                    <BooleanInput key={feature} source={this.assignIsFeatureActiveProp(feature)} label={feature} />
                    <DisabledInput source="id" label="Value" defaultValue={feature} />
                    <TextInput source={this.assignFeatureValueProp(feature)} label="Value" />
                </div>
            )
        })
        :
        null
}

Answer 1

可以传style props，比如使用下面的style

style={{ display: 'inline', float: 'left', marginLeft: '20px' }}

上面的代码看起来像

{
    this.state.features.length > 0 ?
        this.state.features.map((feature) => {
            return (
                <div>
                    <BooleanInput key={feature} source={this.assignIsFeatureActiveProp(feature)} label={feature} style={{ display: 'inline', float: 'left', marginLeft: '20px' }} />
                    <DisabledInput source="id" label="Value" defaultValue={feature} style={{ display: 'inline', float: 'left', marginLeft: '20px' }} />
                    <TextInput source={this.assignFeatureValueProp(feature)} label="Value" style={{ display: 'inline', float: 'left', marginLeft: '20px' }} />
                </div>
            )
        })
        :
        null
}

在 react-admin 中并排输入

Inputs side-by-side in react-admin

reactjs

react-admin