Javascript react组件内的触发器更改事件不工作

我有一个简单的react组件，它包含一个

表单

。在此

表单中

用户有一个搜索框，可以在其中查找用户。 要拥有有效的表单，必须至少有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>
    );
}

但是，控制台根本不显示

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 });
    }
}

导出类ValidatableInput扩展React.Component{
render（）：JSX.Element{
const{labelText，input，requiredMessage，maxLengthMessage，minValueMessage，hidden}=this.props；
input.props.onInvalid=this.handleInvalid；
input.props.onChange=this.handleChange；
如果（隐藏）{
//将高度设置为0
}
返回(
{！隐藏&&labelText}
{input}
{this.state.validityState.valueMissing&&{requiredMessage | |“此字段为必填项”}
{this.state.validityState.tooLong&&{maxLengthMessage | | |“字段长度不应超过“+input.props.maxLength}”
{this.state.validityState.rangeOverflow&&{maxLengthMessage | | |“项目太多。允许的最大值：“+input.props.max}”
{this.state.validityState.rangeUnderflow&&{minValueMessage | | |“项目太少。需要的最小值：“+input.props.min}”
);
}
私有handleInvalid=（ev:React.FormEvent）：any=>{
const input=ev.target作为HTMLInputElement；
this.setState（{validityState:input.validity}）；
}
私有handleChange=（ev:React.FormEvent）：any=>{
const input=ev.target作为HTMLInputElement；
this.setState（{validityState:input.validity}）；
}
}

也许可以简化它，删除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>
  )
}

handleUserSelected=（selectedElement:IUser）：void=>{
这是我的国家({
用户：[
…此.state.users，
选定元素，
],
})
}
render（）{
const{users}=this.state
const isInvalid=users.length<3 | | users.length>6
返回(
{isInvalid&&您的无效邮件}
)
}
如问题所述，所示示例（极其）简化。实际上，有一个
ValdiatableInput
组件，它将
绑定到更改事件，检查
输入的
有效性属性，以检查是否无效以及哪些无效。所以我确实需要触发这个
更改
这是
ValdiatableInput
自己的实现吗？如果是这样，
值也会在每次
渲染时更改。你有办法触发一次改变。从内部检查
组件willreceiveprops
上的值。是的，它是自己的实现。我将
（它也是一个组件）作为proerty传递，绑定输入的onInvalid和onChange，并将
有效性设置为显示/隐藏错误的状态。您不能在
ValdiatableInput
事件处理程序中使用
无效的
属性而不是
onInvalid
吗？否则，对于表单上的每个输入，必须手动触发
onInvalid
（或
onChange
）。我认为这会导致太多的代码重复。如果我通过浏览器更改值，我不必手动触发。一切都很好。只有当我想通过编程触发更改时，它才不起作用。将更新我的问题
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>
  )
}