Question

我正在使用semantic-ui-react，并尝试通过传递accept：pdf prop来验证表单中的某些输入，如下所示：

<Input label='Business Plan__'
  fluid
  accept= ".pdf"
  type="file"
  style={{ padding: '.5em 0em' }} vertical
  value={this.state.projectFile}
  onChange={event => this.setState({ projectFile: event.target.value })}
/>

然而，我没有在实际的输入组件中获得令人愉快的小pdf验证，而是得到了这个人：

<div accept=".pdf" class="ui fluid labeled input" style="padding: 0.5em 0em;">
  <div class="ui label label">Business Plan__</div>
  <input type="file" value="">
</div>

正如您所看到的，div正在获取accept prop而不是input元素。这是非常奇怪的，因为在semantic-ui-react沙箱上，我可以逐字复制并粘贴第一个代码块（好吧，除了最后两行），它可以像我期望的那样工作。

Answer 1

这实际上似乎是semantic-ui-react的错误。您应该打开一个错误报告accept的输入属性未传递到<input/>。

一种解决方法是在Input组件上传递子项。这实际上要求您传递<input/>标记，您可以在其中定义accept属性。

<Input
  fluid
  style={{ padding: '.5em 0em' }} 
  vertical
  value={this.state.projectFile}
  onChange={event => this.setState({ projectFile: event.target.value })}
>
  <input type="file" accept= ".pdf" />
  <Icon name='folder' /> {/* You don't need this line, but you can do this. */}
</Input>

接受：pdf作为prop传递给div而不是输入

1 个答案: