Question

我正在制作一个输入组件，我希望在我想要的时候使用它。

输入组件代码：

import React from "react";
import PropTypes from "prop-types";

class Input extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            [props.name] : props.value
        };

        this.handleUserInput = this.handleUserInput.bind(this)
    }

    handleUserInput(e){
        console.log(e.target.name);
        this.setState( prevState => ({
            [e.target.name] : e.target.value
        }));
    }

    render() {
        const {
            type,
            value,
            placeholder,
            className,
            name,
            id,
            form_control,
            disabled,
            readOnly,
            minLength,
            maxLength,
            ref,
            autoFocus,
            message
        } = this.props;

        let CLASS =
            (form_control ? "form-control" : "") + " " + (className || "");

        if ( message ){
            CLASS += (className ? ' ' : '') + 'is-invalid ';
        }

        return (
            <input
                type={type}
                name={name}
                value={this.state[name]}
                placeholder={placeholder}
                className={CLASS}
                id={id}
                disabled={disabled}
                readOnly={readOnly}
                minLength={minLength}
                maxLength={maxLength}
                ref={ref}
                autoFocus={autoFocus}
                onChange={this.handleUserInput}
            />
        );
    }
}

Input.defaultProps = {
    type: "text",
    form_control: true,
    value : ""
};

Input.propTypes = {
    type: PropTypes.string,
    value: PropTypes.string,
    placeholder: PropTypes.string,
    className: PropTypes.string,
    name: PropTypes.string.isRequired,
    id: PropTypes.string,
    form_control: PropTypes.bool,
    disabled: PropTypes.bool,
    readOnly: PropTypes.bool,
    minLength: PropTypes.number,
    maxLength: PropTypes.number,
    ref: PropTypes.string,
    autoFocus: PropTypes.bool
};

export default Input;

可确认的组件代码：

import React from "react";
import PropTypes from "prop-types";

import Input from "./input";
import FeedBack from "../static/feedback";

class ConfirmAble extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { message } = this.props;

        return (
            <div>
                <Input {...this.props} />
                <FeedBack text={message} />
            </div>
        );
    }
}

ConfirmAble.propTypes = {
    message: PropTypes.string.isRequired
};

export default ConfirmAble;

我在同一组件中多次使用此可确认组件如下：

<ConfirmAble
type="email"
name="email"
value={this.state.email}
message={this.state.formErrors.email}
/>

<ConfirmAble
type="password"
name="password"
value={this.state.password}
message={this.state.formErrors.password}
/>

但输入值不能改变。如果我将handleUserInput函数添加到组件我得到了这个错误

TypeError：无法在t处读取null的属性“name”。（input.jsx：19）

第19行是

[e.target.name]：e.target.value（在handleUserInput函数中）

如果我删除其中一个组件，它就会起作用。

为什么不起作用？问题在哪里？

在同一组件中多次使用时会发生可恢复的组件问题

0 个答案: