Npm reactjs -input -validators

Question

index.js:1446警告: React无法识别DOM元素上的validatorErrMsg属性。如果您有意希望它作为自定义属性出现在DOM中，请将其拼写为小写validatorerrmsg。如果意外地从父组件传递了它，请将其从DOM元素中删除。in input (由t创建) in div (由t创建) in t(由t创建)这就是两天来一直困扰着我的错误。

所需的js文件包括以下代码。

class SharedComponent extends Component {
    constructor() {

        super();

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state = {
            data: {},
        };


    }

    handleChange(event, inputValue, inputName, validationState, isRequired) {
        const value = (event && event.target.value) || inputValue;
        const { data } = this.state;
        data[inputName] = { value, validation: validationState, isRequired };
        this.setState({
            data,
        });
        const formData = formInputData(this.state.data);
        const isFormValid = formValidation(this.state.data);
        console.log('shared component',formData+isFormValid);
    }

    handleSubmit(event) {
        event.preventDefault();
        const isFormValid = formValidation(this.state.data);
        if (isFormValid) {
            // do anything including ajax calls
            this.setState({ callAPI: true });
        } else {
            this.setState({ callAPI: true, shouldValidateInputs: !isFormValid });
        }
    }
     render() {
        const passwordValue = this.state.data.password && this.state.data.password.value;

        return (
            <form className="example">
                <Row>
                    <Col md={6}>
                        <Field required
                            label="Full Name" name="fullName" placeholder="First Last"
                            onChange={this.handleChange}
                            value={this.state.data.fullName}
                            shouldValidateInputs={this.state.shouldValidateInputs}
                        />
                    </Col>
                    <Col md={6}>
                        <Field
                            validator="isEmail" required
                            label="Email" name="email" placeholder="Email"
                            onChange={this.handleChange}
                            value={this.state.data.email}
                            shouldValidateInputs={this.state.shouldValidateInputs}
                        />

                    </Col>
                </Row>
                <Row>
                    <Col md={6}>
                        <Field
                            validator="isAlphanumeric" required minLength={8}
                            minLengthErrMsg="Short passwords are easy to guess. Try one with atleast 8 characters"
                            label="Create a password" name="password" type="password" placeholder="Password"
                            onChange={this.handleChange}
                            value={this.state.data.password}
                            shouldValidateInputs={this.state.shouldValidateInputs}
                        />

                    </Col>
                    <Col md={6}>
                        <Field
                            validator="equals" required comparison={passwordValue}
                            validatorErrMsg="These passwords don't match. Try again?"
                            label="Confirm password" name="confirmPassword" type="password" placeholder="Password"
                            onChange={this.handleChange}
                            value={this.state.data.confirmPassword}
                            shouldValidateInputs={this.state.shouldValidateInputs}
                        />

                    </Col>
                </Row>
                <Field
                    required
                    requiredErrMsg="Enter your address so we can send you awesome stuff"
                    label="Address" name="address" placeholder="1234 Main St"
                    onChange={this.handleChange}
                    value={this.state.data.address}
                    shouldValidateInputs={this.state.shouldValidateInputs}
                />
                <Field
                    label="Address 2"
                    name="address2" placeholder="Apartment, studio, or floor"
                    onChange={this.handleChange}
                    value={this.state.data.address2}
                    shouldValidateInputs={this.state.shouldValidateInputs}
                />

                <Row>
                    <Col md={6}>
                        <Field
                            maxLength={20} required label="City"
                            name="inputCity"
                            onChange={this.handleChange}
                            value={this.state.data.inputCity}
                            shouldValidateInputs={this.state.shouldValidateInputs}
                        />

                    </Col>
                    <Col md={3}>
                        <label htmlFor="inputState">State</label>
                        <select
                            name="inputState" className="form-control"
                            onChange={this.handleChange}
                            value={this.state.data.inputState ? this.state.data.inputState.value : ''}
                        >
                            <option>Choose...</option>
                            <option value="ALABAMA">ALABAMA</option>
                            <option value="ALASKA">ALASKA</option>
                            <option value="ARIZONA">ARIZONA</option>
                            <option>...</option>
                        </select>

                    </Col>
                    <Col md={3}>
                          <Field
                            validator="isPostalCode" locale="US" required maxLength={10}
                            validatorErrMsg="Enter a valid US Zip"
                            label="Zip" name="inputZip"
                            onChange={this.handleChange}
                            value={this.state.data.inputZip}
                            shouldValidateInputs={this.state.shouldValidateInputs}
                        />
                    </Col>
                </Row>
                <button
                    type="submit" onClick={this.handleSubmit} className="btn btn-danger"
                >Sign up
                </button>
                {this.state.callAPI
                    ?
                    <pre className="resultBlock">
              {JSON.stringify(formInputData(this.state.data), null, 4)}
            </pre>
                    : null
                }
            </form>
        );
    }
}

这是我的js文件，用于带验证的rect js表单。有没有人能帮我走一遍呢..THANKS。

Answer 1

您看到的消息意味着Field组件本身并没有对validatorErrMsg prop做任何事情；相反，它只是将它向下传递给DOM节点(可能是一个input元素)。该属性对input元素没有特殊意义，因此不起作用。

无论从哪个库获取Field，您都需要查看文档。这应该指定你可以使用的道具。

或者，如果您自己创建了Field组件，则需要在该组件中实现自己处理validatorErrMsg属性的逻辑。