3

我正在开发一个 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 。

所以在组件构造函数中，名称 state 为空。然后我在异步调用的回调中设置。但是 defaultValue 只能设置一次。所以输入字段总是显示为空。我想知道的是，如何动态设置 TextField 的 defaultValue？我使用 ref 的原因是我不想同时实现 onChange 事件来跟踪重置输入值的状态。如果我可以动态设置 defaultValue，我只会在异步调用的回调中动态设置值。简化这种情况的最佳解决方案是什么？

4

1 回答 1

3

您实际上不需要默认值。如果您想避免使用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>
        );
    }
}
于 2018-07-31T17:31:50.420 回答