React-tags: 输入组件警告

创建于 2018-09-18  ·  7评论  ·  资料来源: i-like-robots/react-tags

我在使用ReactTags警告:

Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
    in input (created by Input)
    in div (created by Input)
    in Input (created by ReactTags)
    in div (created by ReactTags)
    in div (created by ReactTags)

根据这里所说的https://github.com/i-like-robots/react-tags/blob/master/lib/Input.js#L78
defaultValue={query}

你怎么认为?
谢谢!

bug unconfirmed

最有用的评论

我添加了一个 PR 来更改为 defaultValue,但是如果您想要一个在修复之前避免警告的 hack,您可以向使用 ReactTags 的类添加一个 noop 方法,并将其作为组件的 onChange 引用。 这很丑陋,但它会停止警告。

noOp() {
    // does nothing
}

<ReactTags
tags={this.state.tags}
suggestions={this.state.suggestions}
handleAddition={this.handleTagAddition}
handleDelete={this.handleTagDelete}
inputAttributes={{ onChange: this.noOp }}
/>

所有7条评论

我有同样的问题,有什么建议吗?

恐怕我自己没有见过这个,你能告诉我你使用的是哪个 React 版本吗?

我正在使用 React 16.3.2

@i-like-robots 我也遇到了这个问题。

我添加了一个 PR 来更改为 defaultValue,但是如果您想要一个在修复之前避免警告的 hack,您可以向使用 ReactTags 的类添加一个 noop 方法,并将其作为组件的 onChange 引用。 这很丑陋,但它会停止警告。

noOp() {
    // does nothing
}

<ReactTags
tags={this.state.tags}
suggestions={this.state.suggestions}
handleAddition={this.handleTagAddition}
handleDelete={this.handleTagDelete}
inputAttributes={{ onChange: this.noOp }}
/>

这是一个有趣的问题,几年前在https://github.com/facebook/react/issues/1118 中详细讨论过(尽管我从未见过这个警告,任何版本的 React 包括 16.3.2! )

当前的实现在技术上没有_错误_,但我同意使控制台混乱的警告很烦人,应该避免。

我不确定设置defaultValue是正确的解决方案,因为它可能会产生意想不到的后果(参见 https://github.com/i-like-robots/react-tags/pull/139#issuecomment-431006214 ) 但可能还有其他几种解决方法可用。

再研究一下,我可以看到这个警告有 5 个条件:

https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/ReactControlledValuePropTypes.js#L32 -L46

这是我感兴趣的第一个条件,因为默认情况下这个 _should_ 评估为true因为state.query的默认值是一个空字符串。 因此,这应该会导致函数提前返回并且不输出警告。

因此,要触发此警告,我必须更改默认状态 (https://github.com/i-like-robots/react-tags/blob/master/lib/ReactTags.js#L35) 以使其成为真实值。

有没有遇到过这个问题的例子,让我可以更仔细地研究一下?

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

thienanle picture thienanle  ·  9评论

jraack picture jraack  ·  6评论

ekinalcar picture ekinalcar  ·  10评论

yrik picture yrik  ·  10评论

famouspotatoes picture famouspotatoes  ·  5评论