material-ui - 如何在 helpertext Material UI TextField 中添加 onClick 事件？

Question

是否可以在 helperText Material UI TextField 中添加 onClick 事件？我可以在 1 个 TextField 中添加 2 个 helperText 吗？

<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

Is possible to add onClick event in helpertext Material UI TextField?

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

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

And can I add 2 helptext in 1 TextField?

如果我没理解错的话，您希望辅助文本有 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 />}
  />
);