Question

我的父母组件中有方法：

private handleLoginFormChange = (name: string) =>(e: any) => {
   const newState = cloneDeep(this.state);
   const newValue = e.target.value;
   set(newState, name, newValue);
   this.setState(newState);
  }

我尝试在子组件中传递它。

<LoginForm 
 submitLogin={this.handleLoginForm}
 onChangeForm={this.handleLoginFormChange}
 />

我以函数样式添加了孩子组件

interface Props {
  submitLogin?: () => void;
  onChangeForm?: (event: any) => void;
};

function LoginForm ({submitLogin, onChangeForm}:Props) {
    return (
      <div>
        <form>
          <div className="form-group">
            <input type="text"
             onChange={onChangeForm} 
             className="form-control mainLoginInput"
              id="login" placeholder="логин | телефон"
               />
            <input 
            type="password"
            onChange={onChangeForm}
             className="form-control mainLoginInput"
              id="password" placeholder="пароль" />
            <button onClick={submitLogin} type="button" className="btn btn-dark mainLoginButton">Login</button>
          </div>
        </form>
      </div>
    );
}

我不知道如何在界面中正确放置onChangeForm。我尝试做这样的事情

interface Props {
  submitLogin?: () => void;
  onChangeForm?: (name: string) => void;
};

但在这种情况下为错误

(15,14): Type 'void' is not assignable to type '((event: ChangeEvent<HTMLInputElement>) => void) | undefined'.

请问您如何传递道具名称并将其取回。

Answer 1

将事件函数传递给组件时，必须调用其包装器

<LoginForm 
  submitLogin={this.handleLoginForm} 
  onChangeForm={this.handleLoginFormChange('name')} 
/>

如何将React + TypeScript中的道具从父母传递给孩子组件？

1 个答案: