javascript - 触发 react 组件内的更改事件不起作用

Question

我有一个简单的 react 组件，其中包含一个表单。在这个 form 中，用户有一个搜索框可以找到用户。 为了获得有效的表单，必须有至少 3 个但不超过 6 个用户。

因此，我添加了一个隐藏字段(被周围的 display:none; div 隐藏)，其中包含已添加用户的数量。 如果当前号码无效，这将显示错误消息。

以下代码经过简化，但显示了我遇到的主要问题。

在我的渲染调用中我有:

render():JSX.Element {
    return (
        <form>
            <ValidatableInput
                input={<Input type="number" value={this.state.users.length.toString()} min={3} max={6} getRef={(el: HTMLInputElement) => this.testElement = el} onChange={() => alert("changed...")} />}
                minValueMessage={"Currently there are " + this.state.users.length + " users. A minimum of 3 is needed"}
                hidden={true} />
            <UserSearch onUserSelected={this.handleUserSelected} />
            // ...
        </form>
    );
}

而 UserSearch 是用于搜索用户的组件。这主要是一个触发 handleUserSelected 的自动完成输入:

private handleUserSelected = (selectedElement: IUser) : void => {
    // get a copy of the current state
    const newState = { ...this.state };

    // add the user
    newState.users.push(selectedElement);

    // thats what I've tried so far
    this.testElement.dispatchEvent(new Event("change"));
    this.testElement.dispatchEvent(new Event("change", {bubbles: true}));
    this.testElement.onchange(new Event("change"));
    this.testElement.onchange(new Event("change"), {bubbles: true});

    this.setState(newState, () => // here I want to do the triggering as the input has now the new count as value set)
}

但是，控制台根本不显示changed。

当组件发生其他变化时，如何手动调用/触发变化事件？

这是 ValidatableInput 组件:

export class ValidatableInput extends React.Component<IValidatableInputProps, IValidatableInputState> {
    render(): JSX.Element {
        const { labelText, input, requiredMessage, maxLengthMessage, minValueMessage, hidden } = this.props;

        input.props.onInvalid = this.handleInvalid;
        input.props.onChange = this.handleChange;

        if (hidden) {
            // set height to 0
        }

        return (
            <FormGroup row >
                <Label for={input.props.name} md={3}>{!hidden && labelText}</Label>
                <Col md={9}>
                    <div>
                        {input}
                        {this.state.validityState.valueMissing && <div className={classNames("invalid-feedback")}>{requiredMessage || "This field is required"}</div>}
                        {this.state.validityState.tooLong && <div className={classNames("invalid-feedback")}>{maxLengthMessage || "The field shoud not be longer than " + input.props.maxLength}</div>}
                        {this.state.validityState.rangeOverflow && <div className={classNames("invalid-feedback")}>{maxLengthMessage || "There are too many items. Maximum allowed: " + input.props.max}</div>}
                        {this.state.validityState.rangeUnderflow && <div className={classNames("invalid-feedback")}>{minValueMessage || "There are too less items. Minimum needed: " + input.props.min}</div>}
                    </div>
                </Col>
            </FormGroup>
        );
    }

    private handleInvalid = (ev: React.FormEvent<HTMLInputElement>): any => {
        const input = ev.target as HTMLInputElement;
        this.setState({ validityState: input.validity });
    }

    private handleChange = (ev: React.FormEvent<HTMLInputElement>): any => {
        const input = ev.target as HTMLInputElement;
        this.setState({ validityState: input.validity });
    }
}

Answer 1

也许可以让它更简单并删除 refs 和 eventHandling 样板。

您的业务逻辑依赖于 this.state.users.length，对吗？ 所以用它对你有利:

handleUserSelected = (selectedElement: IUser) : void => {
  this.setState({
    users: [
      ...this.state.users,
      selectedElement,
    ],
  })
}

render() {
  const { users } = this.state
  const isInvalid = users.length < 3 || users.length > 6

  return (
    <form>
      {isInvalid && <span>Your invalid message</span>}
      <UserSearch ... />
    </form>
  )
}