时间戳

首页 > 解决方案 > 如何在 onchange 中仅传递字符串而不是整个事件？

reactjs - 如何在 onchange 中仅传递字符串而不是整个事件？

问题描述

嗨，我现在正在做一个项目。里面有2个组件。 InputDialog& AuthenComponent. 我现在正试图跟踪HTMLTextAreaElement. 我的做事方式很好，但其中一位资深人士想要一种不同的方式。我现在将向您展示工作版本。

InputDialog零件

interface InputDialogContentProps {
  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => string;
}

export default function InputDialog(props: InputDialogContentProps) {
  return (
    <div className="inputDialogContent">
      <DialogContent className="dialogContentPlacement">
        <TextField
          onChange={props.onChange}
          fullWidth
        />
      </DialogContent>
    </div>
  );
}

正如你所看到的，我onchange event从道具中得到了。

这是 AuthenComponent（功能组件）

<Dialog
    open
    onClose={hideDialogBox}
    aria-labelledby="alert-dialog-title"
    aria-describedby="alert-dialog-description"
    className="TextPlacement"
>
 <div className="AuthenticationDialog">

  <InputDialogContent
     inputLabel="Email Address"
     inputType="email"
     onChange={onInputChange}/>
   </div>
  </Dialog>

function onInputChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
    setEnableLoginButton(isValidEmail(e.target.value));
    return e.target.value;
  }

const isValidEmail = (email: string): boolean => {
  const validateFormat = /^\w+([\.-]?\w+)*@\w+$/;
  return email.match(validateFormat);
};

这些组件工作正常。但是前辈希望我只传递字符串而不是传递整个事件。我搜索谷歌太久了，找不到解决方案。

他想要这样的东西inputDialog

onChange: (text: string) => void

而不是

onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => string;

标签： reactjstypescript

解决方案

从子组件处理程序中的元素中提取值，并使用它调用 prop 函数：

interface InputDialogContentProps {
  checkValidEmail: (text: string) => void
}

onChange={(e) => { props.checkValidEmail(e.currentTarget.value); }}

在父组件中：

function checkValidEmail(text: string) {
  setEnableLoginButton(isValidEmail(text));
}

推荐阅读