Как использовать пользовательский шаблон для моего компонента?

Question

Я пишу этот компонент для ввода, когда я правильно использую ввод для Изменить работу, но если я использую этот компонент, он не работает правильно, ошибка отображается правильно, но введите номер во вводе

----- Компонент 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>

------- Обрабатывать изменения -------

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

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

-----------форм ------------

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

Answer 1

Поскольку вы не контролируете входное значение, а только проверяете его вне компонента текстового поля, вы не можете контролировать то, что вводите внутри ввода с типом text.Передача атрибута значения в input, который назначен из реквизита, будет работать

   <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>