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

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

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

Answer 1

textarea不会更新onClick因为defaultValue仅在初始加载时有效 。 （ https://facebook.github.io/react/docs/forms.html#default-value ）

解决此问题的一种方法是使用ref来更新textarea 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