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

Question

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

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

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

setAllCapital = true

我希望如此，如果 setAllCapital 为真，输入道具将被赋予 autocap 和文本转换，但如果其为假，则不会被赋予任何东西。

执行此操作的 convention/best 方法是什么？

谢谢

Answer 1

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

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

Answer 2

您可以根据条件输入道具

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

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

编辑：

更简洁的方法是

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

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

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

Setting input props based off another prop state?

uitextfield

reactjs

material-ui

react-props