如果value属性被设置，我的文本输入如何为空？

问题描述：

看看下面的截图。您可以看到文本输入字段为空，但其value属性设置为“b”。如果value属性被设置，我的文本输入如何为空？

您还会注意到在属性选项卡，input下，该value这里被设置为“”。他们为什么不同？这是什么意思？

这可能与输入是由React渲染的事实有关吗？

如果有帮助，这里是负责这个元素（节录）的JSX：

return (
    <td 
    key={field._id} 
    className={`oldField ${colPos}`} 
    > 
    <input 
     type="text" 
     defaultValue={value} 
     onChange={this.changeOldField(record, field)} 
    /> 
    </td> 
)

first-col正常工作，它不是由Reach渲染的？ – Mindless

我不确定我了解你的问题。如果这就是你的意思，所有东西都用React渲染。在'first-col'，'last-col'和'oldField'的情况下，我通过我的jsx中的''标签的'className'属性添加它们（请参阅我的编辑）。 – Shawn

我刚刚注意到，在'输入'下的Properties选项卡中，'defaultValue'被设置为'b'，如预期的那样。只有“价值”本身不是。然而，自从最后一次React渲染以来，我并没有改变该字段的值。 – Shawn

答

看来你是基于从国家一些改变默认值。 defaultValue prop应该只设置一次，以后不再更改，因为React会忽略更多的更改。如果您想根据状态更改值，则应使用正常值prop。否则，如果您希望向用户显示预定义的值，并且同时在输入发生更改时控制输入，则可以在代码中使用某些逻辑来处理onChange和组件中要自动更改的代码该值，或者可能将其放置在占位符prop中，这会给你一些你想要的东西。

如果我使用'value'而不是'defaultValue'，那么用户不能修改该字段。由于用户无法附加到占位符值，因此'placeholder' prop不够好。至于“在你的代码中使用一些逻辑来处理onChange和你的组件中想要自动改变值的代码”，我不明白你的意思。我在输入上有一个'onChange'监听器，我依靠'defaultValue'来在状态改变时自动改变值。 – Shawn

btw'onChange'处理程序不会改变状态，还有一些其他的功能。 – Shawn

我通过强制改变'td'的'key'来解决它，现在React不会忽略'defaultValue'这个prop。顺便说一句，不应该将这种React行为视为一个错误？ – Shawn

如果value属性被设置，我的文本输入如何为空？

相关推荐