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的内容。

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

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

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

1 个答案: