reactjs-输入defaultValue已设置但未显示 [英] reactjs - Input defaultValue is set but not showing

问题描述

使人感到奇怪的是，将defaultValue设置为输入，但有时在刷新页面时不可见.我尝试过console.log，然后在加载数据时多次重新渲染组件，在最后一次重新渲染时，组件包含所需的值，如屏幕截图所示，但未显示.知道为什么吗?谢谢

Noticed some weirdness that defaultValue is set for input, but sometimes it's not visible when page is refreshed. I have tried console.log then component re-renders multiple times as data is loaded, on the last re-render the component contains the required value, as you can see on screenshot, but it's not shown. Any idea why? Thank you

<input type="text" name={this.props.question.id}
                defaultValue={defaultValue}
                onChange={this.onSingleChange.bind({
                    selectAnswer: this.props.selectAnswer,
                    question: this.props.question,
                    form: this.props.fid
                })}
                className="form-control"
            />

推荐答案

我之前也遇到过同样的问题.我的解决方案是在输入中添加一个key属性，该属性是一个随机数.

I had this same issue before. My solution was to add a key prop to my input that was a random number.

key={`${Math.floor((Math.random() * 1000))}-min`}

据我了解，这与仅在初始渲染器上设置的defaultValue有关.随机数会导致使用正确的默认值进行重新渲染.

From what I have read, this has to do with defaultValue being set only on the initial render. The random number causes a re-render with the right default value.

希望有帮助.

这篇关于reactjs-输入defaultValue已设置但未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！