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

Question

我希望输入框的 defaultValue 属性受反应函数的约束。

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

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

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

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

上面执行的结果是我的输入框显示值 function () { [本机代码] }

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

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

如何获取函数的返回值？

Answer 1

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

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

这里不需要绑定。

注：

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

How to get value of a function in defaultValue attribute of an InputBox in ReactJS