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

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 设置值时，名称 state 的初始值将设置为文本字段。但是即使我们不实现 handleChange 事件，我们仍然可以更改从 UI 输入的名称的输入值。但问题是我正在异步获取数据并动态设置 this.state.name 。

所以在组件构造函数中，名称state为空。然后我在异步调用的回调中设置了它。但是 defaultValue 只能设置一次。所以输入字段总是显示为空。我想知道的是，如何动态设置 TextField 的默认值？我使用 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

Setting the defultValue of TextField component of Material UI in React

reactjs

material-ui

react-state-management