如何动态编写 React.useState 函数，以便您可以从 cms 获得尽可能多的输入类型

Posted 2023-03-08

【中文标题】如何动态编写 React.useState 函数，以便您可以从 cms 获得尽可能多的输入类型

【英文标题】：How to dynamically write a React.useState function so that you can have as many input types you want from a cms

【发布时间】：2020-04-09 09:18:13

【问题描述】：

现在这是一个假设性问题，因为我不确定我的方法是否可行。我在表单中有一堆输入复选框字段。我正在使用 datoCms。我在想我可以使用转发器模块来创建尽可能多或删除复选框字段，并为它们提供与我在 dato 的文本字段中作为转发器编写的相同的标签和名称。现在 Dato 输出一个 graphQL api，我可以查询它，它会将转发器字段输出为一个数组，我可以在查询后映射它。

所以我将向您展示我的代码，以及我认为可行的方法，但我只需要指出正确的方向，我可以尝试更新这个问题，但此时我什至不知道真的从哪里开始。

让我感到困惑的部分是React.useState 我如何从 map 方法中动态地向它添加值。

好的，这是我的状态代码

const [formState, setFormState] = React.useState(
    name: "",
    package: `$data.datoCmsPricing.title`,
    email: "",
    subject: "",
    weightLoss:"",
    message: "",
  )

  const onChange = (e) => 

    if (e.target.type === 'checkbox' && !e.target.checked) 
        setFormState(...formState, [e.target.name]: '');
     else 
        setFormState(...formState, [e.target.name]: e.target.value );
    

 

这是我的表格

<form onSubmit=submitForm>
    <h3>Reasons for wanting to train</h3>
    <label>
    Weight Loss
    <input 
    type="checkbox"
    name="weightLoss"
    checked=formState.weightLoss
    onChange=onChange
    />
    </label>
<button type="submit">Submit</button>
</form>

现在这就是我建议我对表单执行的操作以获得尽可能多的复选框，此时这基本上是 sudo 代码，因为我认为它会在 checked 部分中断

data.datoCmsPricing.details.map(detailEntry =>  

    return (



        <label key=detailEntry.id>
        detailEntry.reason
        <input 
        type="checkbox"
        name=detailEntry.reason
        checked=formState.detailEntry.reason
        onChange=onChange
        />
        </label>

    )

)

在这之后我不知道我会用 state 做什么？

提前谢谢你。链接到回购https://github.com/wispyco/jlfit

【问题讨论】：

我认为你处理得很好，只是检查的值会在你的代码中失败。也许checked=formState[detailEntry.reason] ? formState[detailEntry.reason] : false。如果在您的状态中没有找到密钥，那么它将默认为 false 否则它将使用该密钥中的任何内容

但是在const [formState, setFormState] = React.useState( 中我将如何写它所以它是动态的，我在那里设置 weightLoss 但我希望它添加我添加的这些转发器的数量。

知道了，如果您的表单没有初始值，那么您可以使用空对象 const [formState, setFormState] = React.useState(); 初始化您的 formState。您将在 onChange 期间将键和值添加到状态中

哦，好的，如果我遇到困难，我会尝试并更新我的问题。谢谢

【参考方案1】：

useState 完美适用于动态数据。而且您的代码几乎是正确的。

您应该将dataEntries 属性添加到useState 对象

const [formState, setFormState] = React.useState(
  name: "",
  package: `package`,
  email: "",
  subject: "",
  weightLoss:"",
  message: "",
  dataEntries:  
    '1':  reason: 'reason1', checked: false ,
    '2':  reason: 'reason2', checked: false ,
    '3':  reason: 'reason3', checked: false ,
    '4':  reason: 'reason4', checked: false , ,
  )

我已经用演示数据预先填写了dataEtries。在实际应用中，这些数据将从后端获取。

修改onChange以正确处理dataEntries对象

const onChange = e => 
  let value = undefined;
  if (e.target.type === "checkbox") value = e.target.checked;
  else value = e.target.value;
  setFormState(
    ...formState,
    dataEntries: 
      ...formState.dataEntries,
      [e.target.id]: 
        ...formState.dataEntries[e.target.id],
        [e.target.name]: value
      
    
  );
;

最后在表单控件上设置正确的name和id属性，这样onChange就可以正确更新状态数据了。

export const Checkbox = ( onChange, detailEntry ) => (
  <form>
    <label key=detailEntry.id>
      detailEntry.reason
      <input
        type="checkbox"
        name="checked"
        id=detailEntry.id
        checked=detailEntry.checked
        onChange=onChange
      />
      <input
        id=detailEntry.id
        name="target weight"
        value=detailEntry["target weight"]
        onChange=onChange
      />
    </label>
  </form>
);

我添加了额外的字段“目标体重”来展示如何使用任何额外的控件。

完整的演示是here

【讨论】：

所以我使用的是 Gatsby JS，所以对于动态数据，它是由 datoCMS 中的 graphQL 填充的，我将如何获得数字 1、2、3、4。我假设我会做类似'1': reason: dynamicGraphQL, checked: false 的事情，但不应该将整个事情包裹在地图中，所以它会迭代。这是回购github.com/wispyco/jlfit