Question

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

因此，我添加了一个隐藏字段（由周围显示隐藏：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>
  )
}

反应组件内的触发器更改事件无效

1 个答案: