我无法在 Material-UI 中编辑文本字段

Question

我使用 Material-UI 开发了一个 React App，然后我尝试创建独立组件，

检查以下独立组件（<PanelDiv/>），

render() {
        return (
            <div className="panelDiv-component" style={{display:this.props.display}}>
                <div className="panel-field-content">
                    <TextField
                        floatingLabelText={this.props.heading}
                        type={this.props.inputType}
                        value={this.props.value}
                    />
                   {/* <input  defaultValue className="form-control"></input>*/}
                </div>
            </div>
        );
    }

我尝试使用这样的组件，

<PanelDiv
    heading='name'
    inputType="text"
    value={this.state.userData.name}
    display={this.state.display[0]}
/>

但是我不能以这种方式更新输入字段。也没有错误。我该如何解决这个问题？我想更新我的输入字段。

请检查我在下图中的输入：

Answer 1

因为您使用value 属性控制TextField 的值，但您没有使用onChange 函数更新该值，因为TextField 的值没有改变，所以它变为只读。

解决方案：

用TextField 指定onChange 函数并更新其中的值，如下所示：

<TextField
    floatingLabelText={this.props.heading}
    type={this.props.inputType}
    value={this.props.value}
    onChange={this.props._change}
/>

父组件内部：

_Change(event, value){
   //update the value here
}


<PanelDiv
    heading='name'
    inputType="text"
    value={this.state.userData.name}
    _change={this._change}
    display={this.state.display[0]}
/>

Answer 2

有同样的错误。我无法输入任何内容，这是因为没有包含名称道具。示例：

<TextField
  type="email"
  name='email'/>

Answer 3

如果您将值作为道具传递给 TextField，您将无法更改该文本！ 在Material-UI official documentation 上，他们使用 defaultValue="default val" 作为道具。 所以我用 defaultValue 作为道具！对我来说效果很好！

<TextField 
   type="text"
   defaultValue={this.props.val}
   onChange={handleChange} 
  />

Answer 4

看看这个例子 - https://jsfiddle.net/y857yeLq/

您应该定义一个函数，它是文本更改的句柄，并将其传递给onChange 属性。在此示例中，我使用状态来存储当前文本字段值。我明白了，您为此使用了道具，但原理是一样的 - 函数应该在您的情况下更新道具。

const { TextField, MuiThemeProvider, getMuiTheme } = MaterialUI;

 class SliderExampleControlled extends React.Component {

  state = {
    value: '',
  }

  render() {
    console.log(this.state);
    return (
      <div style={{width: '50%', margin: '0 auto'}}>
        <TextField
          hintText="Type here"
          value={this.state.value}
          onChange={(e) => this.setState(e.target.value)}
        />
      </div>
    );
  }

}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <SliderExampleControlled />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);