javascript - 包含空格和换行符的状态更改不会重新渲染

Question

我想做的是使用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"
}

但是文本区域中的内容没有改变，我认为React将状态变化与忽略空格和换行符进行比较。那么我该如何解决这个问题呢？或者破解它？

Answer 1

文本区域不会更新onClick，因为defaultValue仅适用于初始加载。 (https://facebook.github.io/react/docs/forms.html#default-value)

解决此问题的一种方法是使用 ref's 来更新文本区域 onClick 的内容。

例如

  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>
    )
  }

http://codepen.io/jzmmm/pen/pbVavN?editors=0010