Question

我正在为输入字段设置子组件，正在检查其验证onBlur事件。

子组件用法：

<TextInput
    id={'lastName'}
    label={'Last name'}
    required={true}
    minChars={3}
    maxChars={25}
/>

子组件代码：

onBlur(event) {
    // logic here
}

render() {
    let props = this.props;

    return (
        <div>
            <div className="form-group">
                <label htmlFor={props.id}>{props.label}</label>
                <input
                    id={props.id}
                    type={props.type}
                    className="form-control"
                    onBlur={this.onBlur.bind(this)}
                />
                <p className="text-danger">{this.error}</p>
            </div>
        </div>
    );
}

这很好用。

当用户从父组件提交表单时，我希望在所有输入中触发onBlur。我怎么能做到这一点？

Answer 1

在父组件中：

_handleBlur (eventData) {}

render () {
    const handleBlur = this._handleBlur.bind(this);

    return (
        <form>
            <ChildComponent onBlur={handleBlur} {...moreProps} />
            <ChildComponent onBlur={handleBlur} {...moreProps} />
            <ChildComponent onBlur={handleBlur} {...moreProps} />
            <button type="submit" onClick={handleBlur}>Submit</button>
        </form>
    );
}

在子组件中：

render () {
    const props = this.props;

    return (
        <div>
            <div className="form-group">
                <label htmlFor={props.id}>{props.label}</label>
                <input
                    id={props.id}
                    type={props.type}
                    className="form-control"
                    onBlur={props.onBlur}
                />
                <p className="text-danger">{this.error}</p>
            </div>
        </div>
    );
}

基于eventData或其他参数，您可以定义需要模糊的字段。我不知道究竟需要在模糊上发生什么。在某些情况下，最好将其拆分为handleBlur和handleBlurAll方法。希望这有帮助

ReactJS：触发事件onBlur

1 个答案: