在提问之前，抱歉代码太多，因为我是代码新手。
我用PureComponent制作了输入组件，但是我不知道如何控制（比如改变状态）并在父组件中提交它的值。
这是我制作的输入纯组件：

索引.jsx

class Input extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            value: props.value,
            name: props.value,
        };
        this.setRef = this.setRef.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    setRef(ref) {
        this.ref = ref;
    }

    handleChange(e) {
        const { name, onChange, type } = this.props;
        onChange(name, e.target.value);
        this.setState({ isInputError: checkError, value: e.target.value });
    }

render() {
    const { label, name, type} = this.props;
    return (
        <div className="inputBox">
            <input
                id={name}
                value={this.state.value}
                type={type}
                ref={this.setRef}
                onChange={this.handleChange}
                className="BlueInput"
            />
            <label>{label}</label>
        </div>
    );
}
}

Input.propTypes = {
    label: PropTypes.string,
    name: PropTypes.string.isRequired,
    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    type: PropTypes.oneOf(["text", "password", "number", "price", "tel"]),
    onChange: PropTypes.func,
}

Input.defaultProps = {
    value: "",
    type: "text",
    onChange: () => { },
}

export default Input;

这是我想要控制值的父组件

加入.js

function Join() {
  const [idMessage, setIdMessage] = useState("");
  const [isId, setIsId] = useState(false);

  const onChangeId = (name, value) => {
    const currentId = value;
    const idRegExp = /^[a-zA-z0-9]{4,12}$/;

    if (!idRegExp.test(currentId)) {
      setIdMessage("Wrong format");
      setIsId(false);
    } else {
      setIdMessage("You can use this");
      setIsId(true);
    }
  }

  const handleSubmit =  (e) => {
    e.preventDefault();
    let formData = new FormData();
    console.log(formData);
    alert("Join completed.");
  }

  return (
    <div className="join-wrap">
        <form encType="multipart/form-data" onSubmit={handleSubmit}>
          <Input name="id" label="ID" onChange={onChangeId} />
          <p className={isId ? 'possible' : 'impossible'}>{idMessage}</p>
          <button type="submit">Join</button>
        </form>
    </div>
  )
}

export default Join;

我如何控制或提交价值？