如何基于redux表单中的复选框禁用输入字段?

Wan*_*rer 5 reactjs redux redux-form

我想要一个自定义的 redux 表单字段,我可以在其中根据选中的复选框启用/禁用输入。我不希望 redux 表单有两个字段,而是希望它是一个字段。这可能吗?

我有一个此类输入的列表,对于这些输入中的每一个,让 2 个组件一个复选框和另一个输入似乎开销太大。

我只对用户在商店中键入的值(如果有)感兴趣。我正在尝试做这样的事情,但这是失败的。

我的组件:-

class formRenderCheckedInputField extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isChecked: true,
        };
    }
    toggleChange = () => {
        this.setState({
            isChecked: !this.state.isChecked,
        });
    }
    render() {
        return (
            <Checkbox
                name="checkbox"
                title={this.props.label}
                value={this.props.checked}
                onChange={this.toggleChange}
            />
            <FormGroup>
                <input
                    type={this.props.type}
                    placeholder={this.props.placeholder}
                    disabled={!this.state.isChecked}
                    {...this.props.input} />
            </FormGroup>


        );
    }
}

export default connect()(formRenderCheckedInputField)

formRenderCheckedInputField.propTypes  = {
    input: PropTypes.object,
    label: PropTypes.string,
    type: PropTypes.string,
    placeholder: PropTypes.string,

};
Run Code Online (Sandbox Code Playgroud)

我正在尝试使用以下字段调用我的 redux 表单

<Field name="default"
    type="text"
    label="default"
    className="default"
    placeholder="default"
    component={formRenderCheckedInputField} />
Run Code Online (Sandbox Code Playgroud)

有人可以指导我如何做到这一点吗?

谢谢