Question

我正在开发一个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，则将在异步调用的回调中动态地设置值。简化此方案的最佳解决方案是什么？

Answer 1

您实际上不需要默认值。如果要避免使用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>
        );
    }
}

在React中设置Material UI的TextField组件的defultValue

1 个答案: