我想要做的是使用textarea实现代码美化功能,这是我的代码:
export default class App extends React.Component {
constructor (props) {
super(props);
this.state = {
value: '{"city": "NY"}'
}
}
onClick = () => {
var beautifyResult = JSON.stringify(JSON.parse(this.state.value), null, 4);
console.log(beautifyResult);
this.setState({
value: beautifyResult
})
}
render = () => {
return (
<div className="ui form">
<button onClick={this.onClick}>beautify</button>
<textarea defaultValue={this.state.value}></textarea>
</div>
)
}
}
当使用点击页面上的美化按钮时,使用JSON.stringify
可以美化json字符串。在onClick
处理程序中,我检查beautifyResult
是否按照我的要求进行了美化:
{
"city": "NY"
}
但是textarea中的内容并没有改变,我认为React将状态变化与忽略空格和换行进行比较。那么我该如何解决这个问题呢?或者破解它?
答案 0 :(得分:0)
textarea不会更新onClick
,因为defaultValue
仅适用于初始加载。 (https://facebook.github.io/react/docs/forms.html#default-value)
解决此问题的一种方法是使用ref来更新textarea onClick的内容。
e.g。
onClick(e) {
e.preventDefault();
let beautifyResult = JSON.stringify(JSON.parse(this._textArea.value), null, 4);
this._textArea.value = beautifyResult;
this.setState({
value: beautifyResult
});
}
render() {
return (
<div className="ui form">
<button onClick={this.onClick}>Beautify</button>
<textarea
ref={t => this._textArea = t}
defaultValue={this.state.value}>
</textarea>
</div>
)
}