在更新react 16.3中的组件后如何跟踪值

时间:2018-04-06 21:19:25

标签: reactjs

我刚刚更新到反应16.3。我有一个值来跟踪我需要发布到服务器的值。我想在一些道具改变后保存this.value。我发现很多生命周期函数都被弃用了。并且我无法在渲染之前将值保存到redux中。谁能给我一个很好的方法来处理它?感谢。

class Foo extends Component {
  constructor(props) {
    super(props);
    this.value = {};
  }
  render() {
    return (
      //some other components
      <Bar onChange={value => this.value = value} />
    )
  }
}

1 个答案:

答案 0 :(得分:1)

我很有可能用这个来处理它

class Foo extends Component {
  state = {
    text: ''
  }
  render() {
    return (
      //some other components
      <Bar onChange={value => this.setState({text:value})} />
    )
  }
}

请记住这是ES7的方法。比在构造函数()中做得更清晰。如果您不使用新语法,只需在构造函数中启动状态为

constructor(props){
 super(props)
 this.state = {
   text: ''
 }
}

如果您想更多地处理用户提供的处理值,也可以将onChange值传递给自己的函数和setState。许多人都喜欢这样。

e.g。

handleChange = (text) => {
  // Some amaizing text manipulation
  this.setState({text})
}

render() {
  return (
    //some other components
    <Bar onChange={this.handleChange} />
  )
}

并使用redux调度功能

  constructor(props) {
    super(props)
    /**
     * Bind funtions
     */
    const { dispatch } = props
    this.patchReservation = params =>
      dispatch(ActionCreators.patchReservation(params))
  }

然后你只需附上例如this.patchReservation到onChange -listener。 ActionCreators是我的导入内容之一,其中包含我的Redux操作功能。

干杯!