Question

假设我具有下拉列表组件，当我在该下拉列表中选择“其他”选项时，我将显示一个文本框，以指定下拉列表选项中未指定的选项。

因此，如果要为表单的不同输入创建此类组件，可以使用HOC吗？以下是我当前的代码。我如何重用此组件而不必为另一个输入（例如宗教输入）重写相同的类？除了将两个FormItem提取为两个组件之外，还有其他方法吗？

spec/helpers/testScheduler-ui.ts

Answer 1

在没有所有复杂的html的情况下，我会使其变得简单，但要说明我认为的方法可以很好地工作并且可以重用。

我会创建一个新的扩展FormSelect，例如

class ImprovedFormSelect extends Component {
    constructor(props) {
        super(props);
        this.state = {
           isOther: false;
        }
    }

    onSelect(value) {
        if (value === 'OT') {
            this.setState({ isOther: true });
        } else {
            this.setState({ isOther: false });
        }
    }

    render() {
        return (
            <div>
                <FormSelect onChange={value => this.onSelect(value)}>
                    {this.props.options.map(opt =><Option value={opt.value}>Japanese</Option>)}

                    <Option value="OT">Others</Option>
                </FormSelect>

                {this.state.isOther && <FormInput type="text" />}
            </div>
        )

    }
}

该领域的东西，但肯定需要继续努力。但是要使用它，您只需传递选项：

<ImprovedFormSelect
    options={[
         'Japanese',
         'Singaporean'
    ]}
/>

HOC呈现包装的组件+其他组件

1 个答案: