javascript 我无法在 Material-UI 中编辑文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46118340/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I can't edit Text Field in Material-UI
提问by Thilina Sampath
I developed a React App using Material-UI then I tried to create independent Components,
我使用 Material-UI 开发了一个 React App，然后我尝试创建独立的组件，
check the below independent components(<PanelDiv/>),
检查以下独立组件（<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>
);
}
I tried to use the component like this,
我尝试使用这样的组件，
<PanelDiv
heading='name'
inputType="text"
value={this.state.userData.name}
display={this.state.display[0]}
/>
But I can't update input field in this way.Also there is no error. How can i solve this? I want to update my input field.
但是我无法以这种方式更新输入字段。也没有错误。我该如何解决这个问题？我想更新我的输入字段。
Please check my input filed in the below image :
请检查我在下图中提交的输入：
回答by Mayank Shukla
Because you are controlling the value of TextFieldby using valueattribute but you are not updating the value by using onChangefunction, Since value of TextFieldis not changing so it becomes read only.
因为您是TextField通过使用value属性来控制的值，但您没有使用onChange函数更新该值，因为 的值TextField没有改变所以它变成只读的。
Solution:
解决方案：
Specify the onChangefunction with TextFieldand update the value inside that, Like this:
指定onChange函数TextField并更新其中的值，如下所示：
<TextField
floatingLabelText={this.props.heading}
type={this.props.inputType}
value={this.props.value}
onChange={this.props._change}
/>
Inside parent component:
父组件内部：
_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]}
/>
回答by Deke
Had the same error. I was not able to key in anything and it was because there was no name props included. example:
有同样的错误。我无法键入任何内容，这是因为没有包含名称道具。例子：
<TextField
type="email"
name='email'/>
回答by Mikhail Shabrikov
Look at this example - https://jsfiddle.net/y857yeLq/
看这个例子 - https://jsfiddle.net/y857yeLq/
You should define a function, which is handles of text change and pass it to onChangeproperty. In this example I used state for storing current text field value. I see, that you use props for that, but the principle is the same - function should update props in your case.
您应该定义一个函数，它是文本更改的句柄并将其传递给onChange属性。在这个例子中，我使用 state 来存储当前的文本字段值。我明白了，您为此使用了道具，但原理是相同的 - 函数应该在您的情况下更新道具。
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')
);
