我正在开发一个React JS应用程序。我现在正在做的是从服务器异步获取数据并在TextField中呈现值。我知道该怎么做，我的方法也有效。但是，我只是不喜欢我目前的方法。
这是工作方法
class TestComponent extends React.Component {
constructor(props)
{
super(props);
this.fetchName = this.fetchName.bind(this);
this.handleChange = this.handleChange.bind(this);
this.state = {
name : ''
}
}
fetchName()
{
//get the name asynchronously from the server. I am using Axios
this.setState({ name : nameValueFromTheServer })
}
handleChange(e)
{
this.setState({ name : e.target.value })
}
render()
{
return (
<MuiThemeProvider>
<div>
<TextField onChange={this.handleChange} label="Name" value={this.state.name} />
</div>
</MuiThemeProvider>
)
}
}
我对上述方法不满意的是，我必须实现handleChange方法来检索输入值的值。如果我不实现它，则因为状态值未更改，所以无法更改名称输入值。要检索简单的输入值，我必须编写额外的代码行。在jQuery中，我只是像这样检索输入值$（selector）.val（）。在不实现该handleChange方法的情况下，我可以像这样使用ref。
<TextField inputRedf={(input) => this.tfName = input } label="Name" />
然后我像这样动态检索值。
this.tfName.value
使用引用的问题是设置从服务器异步获取的默认值。
我可以将这样的默认值设置为TextField
<TextField inputRedf={(input) => this.tfName = input } defaultValue={this.state.name} label="Name" />
注意上面的代码中的defaultValue属性。当我使用defaultValue设置值时，名称状态的初始值将设置为文本字段。但是，即使我们没有实现handleChange事件，我们仍然可以更改从UI输入的名称的输入值。但是问题是我要异步获取数据并动态设置this.state.name。
因此，在组件构造函数中，名称状态为空。然后在异步调用的回调中设置它。但是defaultValue只能设置一次。因此，输入字段始终显示为空。我想知道的是，如何动态设置TextField的defaultValue？我使用ref的原因是，我也不想实现onChange事件以及跟踪输入值重置的状态。如果可以动态设置defaultValue，那么我将在异步调用的回调中动态地设置值。简化此方案的最佳解决方案是什么？
实际上，您不需要默认值。如果要避免使用onChange处理程序，则可以在异步回调中强制设置输入值：
class TestComponent extends React.Component {
constructor(props) {
super(props);
this.fetchName = this.fetchName.bind(this);
this.handleChange = this.handleChange.bind(this);
}
fetchName() {
if(this.tfName.value == '') {
// only update if user have not changed the input value.
this.tfName.value = nameValueFromTheServer;
}
}
render() {
return (
<MuiThemeProvider>
<div>
<TextField
inputRef={(input) => this.tfName = input }
label="Name"/>
</div>
</MuiThemeProvider>
);
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句