Question

这是声明性组件

export default function InputDialogContent(props: InputDialogContentProps) {

  const [textAreaValue, setTextAreaValue] = useState<string>("");

  return (
    <div>
      <DialogContent>
        <TextField
          autoFocus
          margin="dense"
          id="name"
          label={props.inputLabel}
          type={props.inputType}
          fullWidth
        />
      </DialogContent>
    </div>
  );
}

我正在其他组件中使用它。我想做的是每次在文本区域内键入内容时都想提醒自己


    import InputDialogContent from './shared/InputDialogContent';
    
    export class SettingsMenu extends Component<
      SettingsMenuProps,
      SettingsMenuState
    > {
      constructor(props: SettingsMenuProps) {
        super(props);
        this.state = {
          settingsAnchorElement: null,
          currentDialog: null,
        };
      }
    
      render() {
         return (
            <InputDialogContent inputLabel="Email Address" 
             inputType="email" 
             onChange={(ev: React.ChangeEvent<HTMLTextAreaElement>): void => alert(ev.target.value)}/>
        )}

但是当在编译器中的onChange上悬停时出现错误。我知道发生此错误是因为导出组件本身不是文本区域。有人帮忙

    {
        "message": "Type '{ inputLabel: string; inputType: string; onChange: (ev: ChangeEvent<HTMLTextAreaElement>) => void; }' is not assignable to type 'IntrinsicAttributes & InputDialogContentProps'.\n  Property 'onChange' does not exist on type 'IntrinsicAttributes & InputDialogContentProps'.",
    }

Answer 1

我不清楚您是要控制子组件内部的TextField值，还是要从其父项传递值，但是可以尝试以下方法：

    <TextField
      autoFocus
      margin="dense"
      id="name"
      label={props.inputLabel}
      type={props.inputType}
      value={textAreaValue}
      onChange={ev=>{ setTextAreaValue(ev.target.value); props.onChange(ev); }}
      fullWidth
    />

Answer 2

您的组件缺少onChange事件，您需要将其转发到文本区域：

export default function InputDialogContent(props: InputDialogContentProps) {

  const [textAreaValue, setTextAreaValue] = useState<string>("");

  return (
    <div>
      <DialogContent>
        <TextField
          autoFocus
          margin="dense"
          id="name"
          label={props.inputLabel}
          type={props.inputType}
          onChange={props.onChange}
          fullWidth
        />
      </DialogContent>
    </div>
  );
}

此外，您需要确保InputDialogContentProps包括适当类型的属性onChange。

如何在声明性组件中创建onChange事件侦听器？

2 个答案: