Question

我想要一个自定义的redux表单字段，我可以根据选中的复选框启用/禁用输入。我不希望redux形式有两个字段，并希望它是一个字段。这可能吗？

我有一个这样的输入列表，看起来有两个组件一个复选框和每个输入的另一个输入太多的开销。

我感兴趣的是只有用户在商店中输入的值（如果有的话）。我试图做这样的事情，但这是失败的。

我的组件： -

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,

};

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

<Field name="default"
    type="text"
    label="default"
    className="default"
    placeholder="default"
    component={formRenderCheckedInputField} />

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

由于

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

0 个答案: