reactjs - 如何在重新渲染期间从 props 更新派生状态

Question

我有一个组件:

React = require 'react'

module.exports = Toolbar = React.createClass

  proptypes:
    initialUrl: React.PropTypes.string
    onUrlChange: React.PropTypes.func

  getInitialState: ->
    url: @props.initialUrl

  handleUrlChange: (e) ->
    @setState(url: e.target.value)

  handleUrlKeyUp: (e) ->
    if e.which == 13
      e.target.blur()
      if (url = @state.url.trim())? and url isnt @props.initialUrl
        @props.onUrlChange?(url)
        @setState {url}
    if e.which == 27
      @setState {url: @props.initialUrl}



  render: ->
    <div className="component-toolbar clearfix">
      <input type="text" value={@state.url} onChange={@handleUrlChange} onKeyUp={@handleUrlKeyUp}/>
    </div>

该组件的工作原理如下:

1. 它渲染内部带有 initialUrl 的输入。
2. 用户可以更改它。
3. 当用户按下 Enter 键时，会触发 onUrlChange 事件。
4. 当用户按 esc 时，@state.url 返回原始值 (initialUrl)

到目前为止一切顺利。

但是当我更改上层组件的 props 或状态(从中派生 initalUrl)时，组件具有相同的状态并且不会重新渲染。这是因为 getInitialState 仅被调用一次。但解决这个问题的正确方法是什么？

谢谢。

Answer 1

如果您遵循react中的输入与initialValue的工作方式，则您当前的代码具有相同的行为。只有重新挂载才会导致其更改 url。

作为替代方案，让父级管理状态并添加 onSubmit 事件怎么样？

module.exports = Toolbar = React.createClass

  propTypes:
    url: React.PropTypes.string
    onChange: React.PropTypes.func
    onSubmit: React.PropTypes.func
    onReset: React.PropTypes.func

  handleUrlChange: (e) ->
    @props.onChange(e.target.value)

  handleUrlKeyUp: (e) ->
    url = @props.url.trim()
    if e.which == 13
      e.target.blur()
      if url?
        @props.onChange?(url)
        @props.onSubmit?(url)
    if e.which == 27
      @props.onReset()

  render: ->
    <div className="component-toolbar clearfix">
      <input type="text" value={@props.url} onChange={@handleUrlChange} onKeyUp={@handleUrlKeyUp}/>
    </div>

当然这会改变你组件的 api，但不用担心!因为您从灵活的无状态组件开始，所以您可以将其包装在覆盖 90% 用例的有状态组件中(es6/7 中的示例)。

class StatefulToolbar extends React.Component {
  static propTypes = {
    initialUrl: React.PropTypes.string,
    onUrlChange: React.PropTypes.func
  };

  constructor(props){
    super();
    this.state = {url: props.initialUrl};
  }

  render(){
    return (
      <Toolbar 
        value={this.state.url}
        onChange={(url) => this.setState({url})}
        onReset={() => this.setState({url: this.props.initialUrl})}
        onSubmit={(url) => this.props.onUrlChange(url)}
      />
    );
  }
}

如果您想根据其他事件控制值更新，您应该为该特定情况创建一个包装器，而不是使工具栏变得复杂。

旁注:propTypes，而不是proptypes。