如何在helpertext材质用户界面TextField中添加onClick事件？

Question

是否可以在onClick物质用户界面helperText中添加TextField事件？我可以在1 helperText中添加2 TextField吗？

<TextField
 variant="outlined"
 placeholder="Write a comment..."
 fullWidth
 multiline
 className={classes.tfCmt}
 onChange={this.handleAddComment}
 onFocus={this.handleAppearSaveBtn}
 helperText={visibleSaveBtn && "Save"}
 FormHelperTextProps={{
  className: classes.btnAction
 }}
/>

Answer 1

是否可以在helpertext材质用户界面TextField中添加onClick事件？

是的。您可以在onClick上包含一个FormHelperTextProps函数。

...
<TextField
  variant="outlined"
  placeholder="Write a comment..."
  fullWidth
  multiline
  helperText="Hello world"
  FormHelperTextProps={{
    onClick: () => alert("Clicked!")
  }}
/>

我可以在1个TextField中添加2个帮助文本吗？

如果我的理解正确，您希望有2个用于辅助文本的元素。您可以创建一个组件并将其作为helperText道具传递给TextField组件。

...
function HelperTexts() {
  const helperTexts = [
    {
      id: 1,
      value: "helper text 1"
    },
    {
      id: 2,
      value: "helper text 2"
    }
  ];

  return helperTexts.map((text) => (
    <span key={text.id} data-id={text.id} className="helper-text">
      {text.value}
    </span>
  ));
}

return (
  <TextField
    variant="outlined"
    placeholder="Write a comment..."
    fullWidth
    multiline
    helperText={<HelperTexts />}
  />
);