Question

我是一名初级开发人员。我使用材料ui的Textfield，但我有一个问题。我通过财产获得价值，它的确有效！但是我无法编辑文本字段，所以我想使用onChange参数，这是我的代码：

<TextField ref="docLibelle" value={this.props.lastuploadfile.content}  onChange={this._handleTextFieldChange}

我的功能：

_handleTextFieldChange = (e:any) => {
    this.setState({
        showReferenceIsRequired : false,
        libelDoc: e.target.value
    });
}

我试着这样做：

<TextField ref="docLibelle" value={this.state.libelDoc&& this.props.lastuploadfile.content}  onChange={this._handleTextFieldChange}

但它不起作用..如何通过属性获取值并编辑文本字段？

感谢您的回答！

Answer 1

问题是，在value属性中，您使用props值并在onChange方法内更新state值，因为您的textfield 只读。

<强>解决方案：

1。从父组件传递function onChange textfield使用function更新父值，它将起作用，像这样：

在儿童部分：

<TextField ref="docLibelle" value={this.props.lastuploadfile.content}  onChange={this._handleTextFieldChange}/>

_handleTextFieldChange = (e:any) => {
    this.setState({
        showReferenceIsRequired : false,
    });
    this.props.updateValue(e.target.value);
}

在父组件中：

updateValue(value){
   let = this.state.lastuploadfile;
   lastuploadfile.content = value;
   this.setState({lastuploadfile})
}

2. 将props值存储在state变量中，并将该变量用于textfield的value属性。

将textfield的初始值存储在state变量中：

constructor(props){
   super(props);
   this.state = {libelDoc: props.lastuploadfile.content}
}

在value中的textfield属性中使用该变量：

<TextField ref="docLibelle" value={this.state.libelDoc}  onChange={this._handleTextFieldChange}

更新state方法中的onChange变量：

_handleTextFieldChange = (event, value) => {
     this.setState({
         showReferenceIsRequired : false,
         libelDoc: value
     });        
 }

Answer 2

我认为解决方案非常简单。由于您希望能够更改textField值并使用值初始化它，您可以在componentDidMount方法中使用props设置setState

componentDidMount(){
    this.setState({libelDoc: this.props.lastuploadfile.content})
}

并像<＆＃39;

一样使用它

<TextField ref="docLibelle" value={this.state.libelDoc}  onChange={this._handleTextFieldChange}

React：相同参数的State和props

2 个答案: