当前位置: 博客 /  ReactJs  / React中子组件向父组件传值

React中子组件向父组件传值

在 React.js 中,子组件可以通过 props传值到父组件。

父组件

在父组件中定义子组件要用到的方法,将这个方法以 JSX 属性的方式传给子组件,子组件即可以 props 获取到该方法。

父组件举例

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "子组件输入框的默认值" };
    this.onChildChange = this.onChildChange.bind(this);
  }

  onChildChange(v) {
    console.log("子组件输入的是" + v);
    this.setState({
      value: v // 当子组件修改输入值时在父组件更新state
    });
  }

  render() {
    return (
      <div>
        <h1>这里是父组件</h1>
        <Child
          onInputChange={this.onChildChange}  // 传递方法给子组件
          value={this.state.value}  //将更新后的value传递给子组件
        />
        <p>子组件输入的值是:{this.state.value}</p>
      </div>
    );
  }
}

子组件

子组件 Child 使用props调用父组件传递过来的方法。

子组件举例1

当子组件内部不需要使用该值的处理值时:

class Child extends React.Component {
  render() {
    return (
      <div>
        <h1>这里是子组件</h1>
        <input
          onChange={e => this.props.onInputChange(e.target.value)}   //直接使用父组件传递的onInputChange方法将子组件的输入值传给父组件,此处传递的是e.target.value而不是e
          value={this.props.value}  //值为在父组件更新后的value
        />
        <p>子组件输入的值是:{this.props.value}</p>
      </div>
    );
  }
}

子组件举例2

子组件内部需要对获取的值进行处理时,比如进行md5加密

方法1:直接使用父组件传递的值进行处理

import md5 from "md5"; // 引入对值进行md5加密需要的依赖
class Child extends React.Component {
  render() {
    return (
      <div>
        <h1>这里是子组件</h1>
        <input
          onChange={e => this.props.onInputChange(e.target.value)}   //直接使用父组件传递的onInputChange方法将子组件的输入值传给父组件,此处传递的是e.target.value而不是e
          value={this.props.value}  //值为在父组件更新后的value
        />
        <p>子组件输入的值是:{this.props.value}</p>
        <p>子组件输入的值进行MD5加密后是:{md5(this.props.value)}</p>
      </div>
    );
  }
}

方法2:在组件内调用方法处理该值,管理组件内部state

import md5 from "md5"; // 引入对值进行md5加密需要的依赖
class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      md5Value: "子组件中该值的初始默认值"
    };
    this.onInputChange = this.onInputChange.bind(this);
  }

  onInputChange(e) {
    console.log("input输入的是" + e.target.value);
    this.props.onInputChange(e.target.value); // 将子组件输入的值传给父组件
    this.setState({
      md5Value: md5(e.target.value) // 在组件内部处理输入值进行md5加密,更新组件内state
    });
  }

  render() {
    return (
      <div>
        <h1>这里是子组件</h1>
        <input
          onChange={e => this.onInputChange(e)}   //使用内部onInputChange方法,在该方法内调用父组件方法及组件内部处理输入值
          value={this.props.value}  //值为在父组件更新后的value
        />
        <p>子组件输入的值进行MD5加密后是:{this.state.md5Value}</p>
      </div>
    );
  }
}

- END -