根据另一个道具状态设置输入道具？

问题描述

我想知道如何根据另一个道具更新文本字段中的 inputProps，

  <TextField
  name={props.name}
  value={props.vals}
  inputProps={{autocapitalize:"characters",textTransform:"uppercase"}}
  onChange={props.getStuff}
/>

我还有一个道具，用于检查文本字段是否应全部大写显示所有内容！

setAllCapital = true

我希望如此，如果 setAllCapital 为 true，则输入道具会被赋予 autocap 和文本转换，但如果它为 false，则不会给出任何东西。

执行此操作的惯例/最佳方法是什么？

谢谢

解决方法

其中一种方法是内联检查条件并传递道具。如果 props.setAllCapital 为 false，则没有任何内容传递给 inputProps。

<TextField
      name={props.name}
      value={props.vals}
      inputProps={props.setAllCapital ? {autocapitalize:"characters",textTransform:"uppercase"}:undefined}
      onChange={props.getStuff}
    />

,

您可以根据条件传递输入道具

<TextField
  name={props.name}
  value={props.vals}
  inputProps={props.setAllCapital ? {autocapitalize:"characters",textTransform:"uppercase"} : "whatever value you want"}
  onChange={props.getStuff}
/>

现在，只要您的 setAllCapital 为 false，您就不会将 autocap 和 textTransform 发送到 TextField。

编辑：

更简洁的方法是

<TextField
  name={props.name}
  value={props.vals}
  inputProps={props.setAllCapital && {autocapitalize:"characters",textTransform:"uppercase"}}
  onChange={props.getStuff}
/>

现在，如果 setAllCapital 为 false，您的输入道具将是未定义的