Question

index.js：1446警告：React无法识别DOM元素上的validatorErrMsg道具。如果您有意让它作为自定义属性出现在DOM中，请将其拼写为小写validatorerrmsg。如果您不小心从父组件传递了它，请将其从DOM元素中删除。在输入中（由t创建）在div中（由t创建）在t中（由t创建）在div中（由t创建）在t中（由t创建）在div中（由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表单的js文件。任何人都可以帮忙浏览一下吗。谢谢。

Answer 1

您看到的消息表示Field组件本身并没有使用validatorErrMsg道具做任何事情；相反，它只是将其向下传递到DOM节点（可能是input元素）。该属性对input元素没有特殊含义，因此没有任何作用。

您需要检查文档，以获取从Field获得的任何库。那应该指定您可以使用哪些道具。

或者，如果您自己创建了Field组件，则需要在该组件内实现用于自行处理validatorErrMsg prop的逻辑。

NPM reactjs-输入-验证器

1 个答案: