Question

我为输入编写此组件，当我使用输入onChange正常工作时，但如果我使用此组件无法正常工作，则错误显示正确，但在输入中键入数字

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

由于您不能仅在文本框组件外部验证输入值，因此无法控制输入为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>

如何为组件添加自定义模式？

1 个答案: