React：受控表单上的复选框和文件

Posted 2023-02-23

【中文标题】React：受控表单上的复选框和文件

【英文标题】：React: Checkbox and file on controlled forms

【发布时间】：2018-09-26 08:57:29

【问题描述】：

对于文本类型的输入，这很容易，使用 onChange() 我调用 setState() 更新状态并通过其 value 属性显示输入的状态。但是，对于复选框甚至更多的文件，我完全迷失了。

这将是：

处理程序 事件对象的属性 属性 ... 对于输入>复选框和输入>文件

输入示例>文本

onChange() event.target.value 价值

【参考方案1】：

对于复选框，您可以使用以下方法进行检查：

handleChange(e) 
  console.log(e.target.checked);

<input 
  type="checkbox" 
  name="checkbox"
  onChange= this.handleChange  
/>

对于文件，您可以按以下方式进行：

handleUploadFile(e) 
  let selectedFile = e.target.files;
  //if single file
  console.log(selectedFile[0]);
  //else loop around the files
  ...

【讨论】：

谢谢，@yash-thakur 所以，我们不设置状态并为该元素的 x 属性分配值...？示例： this.handleChange(e.target.checked) /> 再次感谢！

您可以在 handleChange 函数中设置状态，并按照您在上述评论中提到的内容使用该状态。