Javascript 重复表单验证未被捕获

我对redux相当陌生

我想验证的是，两个关键字段不能包含相同的值，所有字段都是必需的。对于所需的部分，我使用了字段级验证，这似乎很好。为了确定元素是否已经存在，我使用同步验证

当同步验证工作时，我用控制台日志检查了它。它捕获错误并将其添加到错误对象。但是我的表格没有显示。。它没有装订吗？我错过了什么

我在文本字段中添加了“onFocus”和“onBlur”鼠标事件，以使onBlur成为只读。他们似乎工作得很好。但是当我加上这个的时候，我的

{toucted&&error&&&{error}}

error停止显示。我做错了什么

我的表格

const required = value => (value ? "" : "required")
class CreateObject extends React.Component {

    enableTextField = (e) => {
        document.getElementById(e.target.id).removeAttribute("readonly");
    }

    disableTextField = (e) => {
        document.getElementById(e.target.id).setAttribute("readonly", true);
    }

    renderField = ({ input, label, type, id, meta: { touched, error } }) => (

        <React.Fragment>
            {touched && error && <span>{error}</span>}

            <FormControl {...input} type={type} placeholder={label} id={id}
                className={`align-inline object-field-length ${error ? 'error' : ''}`}
                onFocus={this.enableTextField.bind(this)}
                onBlur={this.disableTextField.bind(this)}
            />
        </React.Fragment>
    );

    renderObjects = ({ fields, meta: { touched, error, submitFailed, errors } }) => {
        return (
            <ul>
                <li>
                    <center>
                        <Button bsStyle="success" onClick={() => fields.push({})}>Add New Object</Button>
                    </center>
                </li>
                {fields.map((object, index) => (
                    <li key={index}>
                        <br />
                        <center>
                            <Field
                                name={`${object}.key`}
                                type='text'
                                component={this.renderField}
                                validate={required}
                                label="Key"
                                id={`${object}.key`}
                            />
                            <div className="divider" />
                            <Field
                                name={`${object}.method`}
                                type='text'
                                component={this.renderField}
                                label="Method"
                                validate={required}
                                id={`${object}.key` + `${object}.method`}
                            />
                            <div className="divider" />
                            <Field
                                name={`${object}.value`}
                                type='text'
                                component={this.renderField}
                                label="Value"
                                validate={required}
                                id={`${object}.key` + `${object}.value`}
                            />
                            <div className="divider" />
                            <span
                                className="align-inline"
                                onClick={() => fields.remove(index)}
                                className="allIcons mdi mdi-delete-forever"
                            />

                        </center>
                    </li>
                )

                )}
            </ul>
        );
    }

    submit() {
        //this
    }

    render() {

        const { handleSubmit, pristine, reset, submitting, invalid } = this.props;
        console.log(this.props);
        return (
            <form onSubmit={handleSubmit(this.submit.bind(this))}>
                <FieldArray name='objects' component={this.renderObjects} />
                <center>
                    <Button className="align-inline" type="submit" disabled={pristine || submitting || invalid}>Submit</Button>
                    <div className="divider" />
                    <Button className="align-inline" disabled={pristine || submitting} onClick={reset}> Clear All Values </Button>
                </center>
            </form>
        );
    }
}
export default reduxForm({
    form: 'ObjectRepo',
    validate
})(CreateObject); 

---

提前多谢

您可能想看看下面适合我的代码。这是您的容器（或智能组件，如果您愿意）

模型类型的代码是

class TypesModel {
    constructor(schema) {
        this.schema = schema
    }
    transform(data) {
        const keys = Object.keys(this.schema)
        const result = {}
        for (let index = 0, len = keys.length; index < len; index += 1) {
            const keyName = keys[index]
            try {
                result[keyName] = this.schema[keyName](data[keyName])
            } catch (e) {
                throw new Error(`Type conversion for field "${keyName}" failed`)
            }
        }
        return result
    }
}

export default TypesModel

---

我想你不能使用onfocus，因为已经触动了一些动作。谢谢@Max的努力，但这对我不起作用

export const validateProps = {
  name: [required],
  value: [required, intOrFloat, maxPercent],
  someId: [required],
}

export const transformer = new TypesModel({
  name: String,
  value: Number,
  someId: Number,
})

export default createFormContainer(
  formName,
  'your_form',
  transformer,
  validateProps,
  mapStateToProps,
  mapDispatchToProps,
  null,
  false,
  null,
  onSuccessSubmit)(YourFormContainer)

class TypesModel {
    constructor(schema) {
        this.schema = schema
    }
    transform(data) {
        const keys = Object.keys(this.schema)
        const result = {}
        for (let index = 0, len = keys.length; index < len; index += 1) {
            const keyName = keys[index]
            try {
                result[keyName] = this.schema[keyName](data[keyName])
            } catch (e) {
                throw new Error(`Type conversion for field "${keyName}" failed`)
            }
        }
        return result
    }
}

export default TypesModel

export const required = value => isEmpty(value) &&
  'Required field'
export const intOrFloat = value => (!isInt(`${value}`) && !isFloat(`${value}`)) &&
    'Must be an integer of float'