react混合受控组件

最新推荐文章于 2025-05-20 08:15:42 发布

ckl_soft

最新推荐文章于 2025-05-20 08:15:42 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： react

本文链接：https://blog.youkuaiyun.com/cklsoft/article/details/53354892

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个基于React的组件Searcher，该组件通过处理输入框的值来管理自身的状态，并监听外部传入的状态更新。组件实现了点击及键盘事件处理、新属性接收时的状态更新逻辑以及输入变化时的状态同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件可能受上层控制而改变，也可能自身触发而改变。好麻烦。。。

class Searcher extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {content: '',oldPropsContent:''}
  }
  handleClick = (e) => {
    e.preventDefault();
    if (e.keyCode == "13") {
      let content=this.refs.inputer.value.trim()
      this.setState({content: content})
      EventEmitter.dispatch('search', content)
    }
  }
  componentWillReceiveProps(newProps){
    if(newProps.content!=''&&newProps.content!==this.state.oldPropsContent) {
      //比对老数据oldPropsContent，防止被覆盖
      this.setState({content: newProps.content, oldPropsContent: newProps.content})
    }
  }
  handleChange= (e)=>{
    if (e.target.value === this.state.value) return;
    this.setState({content:e.target.value})
  }

  render() {
    return (
      <div className="searcher">
        <input placeholder="请输入查询内容" type="text" onKeyUp={this.handleClick}
               onChange={this.handleChange}
               ref="inputer" value={this.state.content||''}/>
      </div>
    );
  }
}