我想实现内联编辑,但遇到了问题。当我单击文本时,会出现一个文本字段,当我填充文本并按 Enter 键或单击某处时,未设置填充的文本。我犯了什么错误?
代码
export default class InlineEditing extends Component {
constructor() {
super();
this.state = {
edit: false,
text: 'Click here to name your device'
};
}
handleDeviceName = () => { this.setState({ edit: true })};
addDeviceName = (e) => {
this.setState({
text: e.target.value
});
};
render() {
return (
<Wrapper>
<div
onClick={this.handleDeviceName}
>
{this.state.edit ?
<TextField
name = "device_name"
onClick={this.addDeviceName}
/> :
this.state.text
}
</div>
</Wrapper>
);
}
}
最佳答案
一旦用户单击文本字段,就会调用函数addDeviceName
,并且该字段的当前文本将被设置为状态。
您需要将 onClick
事件更改为 onChange
或 onBlur
关于javascript - 无法设置已编辑的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41076939/