一个关于搜索的组件， 来更加详细的了解父子组件之间传值的概念
代码量缩短
不推荐:

image.png

推荐:

image.png

子组件中放入搜索的组件
searchBox.js中

class SearchBox extends React.Component {
  constructor() {
    super();
    this.state = {
      nameValue: '',
      idValue: '',
    }
  }
  changeFieldValue = (e, key) => {
    const value = typeof e === 'object' ? e.target.value : e;
    this.setState({
      [key]: value,
    });
  }
  // 获取所有input中的值
  onSearch = () => {
    this.nameValue = this.state.nameValue;
    this.idValue = this.state.idValue;
    // 搜索时的值要传入到父组件的接口. 
    // 所以牵扯到子组件向父组件传值
    // 1.在子组件中定义一个事件. 用父组件传递过来的属性(props),是个函数,
    // 2. 呼叫这个函数把在子组件中拿到的值传递到父组件中的函数进行处理
    this.props.getInitData(
      this.nameValue,
      this.idValue,
    )
    // 3. 去父组件中引用子组件的地方定义一个函数来接收this.props.getInitData传递过来的值
  }
    render() {
        return (
          <div>
            <span>名称:</span>
            <Input
            placeholder="请输入"
            onChange={ (e) => { this.changeFieldValue(e, 'nameValue'); } }
            value={this.state.nameValue}
          />
            <span>id:</span>
            <Input
            placeholder="请输入"
            onChange={ (e) => { this.changeFieldValue(e, 'idValue'); } }
            value={this.state.idValue}
            width="320px"
          />
          <Button
            type="primary"
            style={{ marginLeft: '10px' }}
            className="searchButton"
            onClick={this.onSearch}
            width="320px"
          >
            搜索
          </Button>
          </div>
        )
    }
}

1. 点击搜索, 需要把搜索的值传到父组件中
   牵扯到子组件向父组件传值
2. 用父组件传过来的getInitData属性(props，是个函数)，呼叫它把value交给父组件中的函数去处理
   this.props.getInitData( this.nameValue, this.idValue, )

3.到父组件中
在引用子组件的地方传入getInitData这个属性
<SearchBox getInitData={this.propsChildEvent} />

4. 在父组件中定义propsChildEvent这个事件

  // 一旦子组件点击就会触发此事件
    propsChildEvent = (nameValue = '', idValue = '') => {
        this.nameValue = nameValue;
        this.idValue = idValue;
        console.log('this.nameValue==',this.nameValue,
        'this.idValue==',this.idValue
    )
    }

点击搜索按钮

image.png

下一篇

搜索组件 - 父组件向子组件传值(子组件调用父组件方法)