搜索组件 - react中子组件向父组件中传值

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

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
可以看到, 当点击搜索时 在父组件中就拿到输入的值, 然后就可以调用接口传参了
5.每个页面的ajax请求获取数据肯定是在父组件中的, 那么要把这个请求要传递到子组件的onSearch方法中, 又牵扯到了子组件调用父组件方法或者叫父组件向子组件传递方法类似于父组件向子组件传值.

下一篇

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