ReactJS:触发事件onBlur

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方法可能会更好。希望这能有所帮助