突出显示值更改ReactJS

2 回答

• 4

  如果您的新值作为新道具下降，那么您可以在组件上使用componentWillReceiveProps生命周期方法 . 它在组件更新之前调用 .

  在该方法中，您可以比较新值（作为参数传递给方法）和旧值（可用作 this.props ） .

  ---

  例如：

  componentWillReceiveProps: function(newProps) {
      if(this.props.query != newProps.query) {
          //handle change of query prop
          //may include calls to this.setState()
      }
  }
  

  回复于 2024-04-23T14:24:58+08:00
• 0

  假设您的元素是输入元素，则需要使用onChange事件侦听器 . 如果你想要突出显示那个元素，我建议你有一个CSS类突出显示元素，然后根据状态（或者如果是孩子的道具）在 render() 中有条件地应用它 .

  因此，例如，您可以在 render() 中拥有一个组件，添加处理函数和相应的侦听器：

  handleChange: function(evt) {
      //input was changed, update component state (or call parent method if child)
      this.setState({changed: true});
  },
  
  render: function() {
      return (<div>
          <input type="text" 
                 className={this.state.changed ? 'highlight' : ''}
                 onChange={this.handleChange}
           />
      </div>);
  }
  

  这应该让你朝着正确的方向前进 .

  回复于 2024-04-23T14:24:58+08:00