javascript - 如何在ReactJS中获取InputBox的defaultValue属性中函数的值

Question

我希望输入框的 defaultValue 属性由 react 函数绑定(bind)。

getSelectedColor(e) {
    return 'red'; // just for sake of simplicity now
}

这是在 render() 函数中定义的虚拟 DOM (HTML)

<input type="text" defaultValue={this.getSelectedColor.bind(this)} />

我已经在组件类的构造函数中声明了该函数。

上面实现的结果是我的输入框显示值function () { [ native 代码] }

即使我为 defaultValue 属性编写内联函数，也会发生这种情况

<input type="text" defaultValue={()=>{return 'red'}} />

如何获取函数的返回值？

Answer 1

您想要将值分配给 defaultValue 属性，因此不要绑定(bind)该方法，而是调用该方法，如下所示:

<input type="text" defaultValue={this.getSelectedColor()} />

此处不需要绑定(bind)。

注意:

defaultValue:这只会分配初始值，意味着在初始渲染期间分配一次。