如何为我的组件使用自定义模式？

Question

i write this component for input ,when i use input on Change work correctly but if i use this component not work correct, error show correctly but type number in input

-----Component textBox-------

        <div className="form-group">
            <label className={"d-block"} htmlFor={this.props.id}>{this.props.label}</label>
            <input type={this.props.type}
                   name={this.props.id}
                   onClick={this.props.clicked}
                   onChange={this.props.onChange}
                   placeholder={this.props.placeholder}
                   className={"form-control"}
                   id={this.props.id}
                  />
            <span className="text-danger" aria-live="polite">{this.props.error}</span>
        </div>

-------Handle onChange-------

 handleChangezipCode=(e) =>{
        if (e.target.value.match("^[a-zA-Z ]*$") != null) {
            this.setState({
                zipCode: e.target.value,
                zipCodeError: "correct"
            })

        } else {
            this.setState({
                zipCodeError: "error"
            })
        }
    }

-----------form ------------

            <TextBox
                type="text"
                label="zipCode"
                placeholder="zipCode"
                id="zipCode"
                ref="zipCode"
                error={this.state.zipCodeError}
                value={this.state.zipCode}
                onChange={this.handleChangezipCode}
            />

Answer 1

Since you are not controlling the input value just validating it outside of textbox component, you are not able to control what you enter inside the input with type as text . Passing a value attribute to input which is assigned from props will work

   <div className="form-group">
        <label className={"d-block"} htmlFor={this.props.id}>{this.props.label}</label>
        <input type={this.props.type}
               name={this.props.id}
               onClick={this.props.clicked}
               onChange={this.props.onChange}
               placeholder={this.props.placeholder}
               className={"form-control"}
               value={this.props.value || undefined}
               id={this.props.id}
              />
        <span className="text-danger" aria-live="polite">{this.props.error}</span>
    </div>