将点击事件从一个 class 组件传递到 React 中的另一个组件

Question

我有两个组件。 这是第一个的代码，有两个按钮，正好是两个单选按钮，用于选择年龄或姓名：

class Radio extends Component {
  constructor(props) {
    super(props);
    this.state = {
      radioClick: "name",
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({
      radioClick: event.target.value, // THIS IS THE EVENT
    });
  }

  render() {
    return (
      <div className="radioButtons">
        <div className="left">
          <input
            type="radio"
            value="name"
            onChange={this.handleChange}
            checked={this.state.radioClick === "name"}
          />
          <label>&nbsp;&nbsp;Sort by name</label>
        </div>
        <div className="right">
          <input
            type="radio"
            value="age"
            onChange={this.handleChange}
            checked={this.state.radioClick === "age"}
          />
          <label>&nbsp;&nbsp;Sort by age</label>
        </div>
      </div>
    );
  }
}

export default Radio;

这是另一个组件，它显示一个表格，其中包含数组中的所有元素，并带有一些按年龄或名称对数据进行排序的方法：

class Table extends Component {
  constructor(props) {
    super(props);
    this.value = "";
    this.people = [
      {
        name: "testing",
        birth: "00/00/0000",
      },
 
    ];
  }


  renderTableData = (value) => {
    value = this.value;
    let newArray = [...this.people];

    if ("age" === "age") {
      let arraySortAges = newArray.sort((a, b) => {
        return a.age + b.age;
      });
      return arraySortAges.map((person, index) => {
        const { name, birth } = person; //destructuring
        return (
          <tr key={name + "-" + birth}>
            <td>{name}</td>
            <td>{birth}</td>
          </tr>
        );
      });
    } else if ("name" === "") {
      let arrayNameSorted = newArray.sort((a, b) => {
        let fa = a.firstName.toLowerCase(),
          fb = b.firstName.toLowerCase();

        if (fa < fb) {
          return -1;
        }
        if (fa > fb) {
          return 1;
        }
        return 0;
      });
      return arrayNameSorted.map((person, index) => {
        const { name, birth } = person; //destructuring
        return (
          <tr key={name + "-" + birth}>
            <td>{name}</td>
            <td>{birth}</td>
          </tr>
        );
      });
    }
  };

  render() {
    return (
      <div className="table-div">
        <table className="table table-striped table-bordered table-hover full-width">
          <thead>
            <tr>
              <th className="course-name">Person Name</th>
              <th className="duration">Date of Birth</th>
            </tr>
          </thead>
          <tbody>{this.renderTableData()}</tbody>
        </table>
      </div>
    );
  }
}


export default Table;

他们在父组件 App 中相遇：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }


  render() {
    return (
      <div className="container-fluid">
        <center>
          <h1>Birthday Records</h1>
        </center>
        <Radio  />
        <Table  />
      </div>
    );
  }
}

export default App;

我的问题是如何将事件（// Radio Componente 中的事件）传递给表格组件？

Answer 1

您可以抬起 state 并将手柄 function 从App传递到Radio和Table

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      radioClick: "",
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = (event) => {
    let word = event.target.value;
    this.setState({
      radioClick: word,
    });
  };

  render() {
    return (
      <div className="container-fluid">
        <center>
          <h1>Birthday Records</h1>
        </center>
        <Radio
          handleEventChange={this.handleChange}
          event={this.state.radioClick}
        />
        <Table event={this.state.radioClick} />
      </div>
    );
  }
}

export default App;

调用事件的位置

class Radio extends Component {
  constructor(props) {
    super(props);
    this.state = {
      radioClick: this.props.event,
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = (event) => {
    console.log(event.target.value);
    this.setState({
      radioClick: event.target.value,
    });
  };

  render() {
    return (
      <div className="radioButtons">
        <div className="left">
          <input
            type="radio"
            value="name"
            onClick={this.handleChange}
            onChange={this.props.handleEventChange}
            checked={this.state.radioClick === "name"}
          />
          <label>&nbsp;&nbsp;Sort by name</label>
        </div>
        <div className="right">
          <input
            type="radio"
            value="age"
            onClick={this.handleChange}
            onChange={this.props.handleEventChange}
            checked={this.state.radioClick === "age"}
          />
          <label>&nbsp;&nbsp;Sort by age</label>
        </div>
      </div>
    );
  }
}