我如何使用道具在组件之间传递数据？

Question

朋友们，我是一个React初学者，我有一个使用道具在组件之间传递数据的问题我有三个组件Users、UserList和AddUser。在UserList组件中，应该显示所有的用户，AddUser组件包含一个表单。我想从表单中抓取数据，并在Users组件中更新我的状态，我的页面是Home，User List和AddUser。我的页面是主页，用户列表和添加新用户。

import React, { Component } from "react";
import UserList from "./userList";

class Users extends Component {
  state = {
    users: [
      {
        name: "ali",
        lastname: "ahmadi",
        language: "python",
        gender: "male",
        score: 100,
      },
      {
        name: "Ahmad",
        lastname: "moradi",
        language: "JavaScript",
        gender: "male",
        score: 90,
      },
    ],
  };
  removeUser = (name) => {
    let users = this.state.users.filter((user) => {
      return user.name !== name;
    });
    this.setState({
      users,
    });
  };
  render() {
    return (
      <div>
        <UserList users={this.state.users} removeUser={this.removeUser} />
      </div>
    );
  }
}

export default Users;

和我的用户列表组件代码

import React from "react";
import Users from "./user";

const UserList = (props) => {
  const { users } = props;
  console.log(users);

  return (
    <div className="container">
      <h1 className="text-center mt-4" style={{ fontFamily: "tahoma" }}>
        All Users
      </h1>
    </div>
  );
};

export default UserList;

这是我的表格组件

import React, { Component } from "react";
import Users from "./user";

class AddUser extends Component {
  state = {
    name: "",
    lastname: "",
    language: "",
    score: 0,
    gender: "",
  };
  handleChange = (e) => {
    this.setState({
      [e.target.id]: e.target.value,
      gender: e.target.value,
    });
  };
  handleSubmit = (e) => {
    e.preventDefault();
  };

  render() {
    return (
      <div className="container">
        <form onSubmit={this.handleSubmit} className="col-lg-8 m-auto">
          <fieldset className="form-group">
            <legend>Add New User</legend>

            <div className="form-group ">
              <input
                type="text"
                className="form-control"
                id="name"
                placeholder="Name"
                onChange={this.handleChange}
              />
              <input
                type="text"
                className="form-control my-2"
                id="lastname"
                placeholder="Last Name"
                onChange={this.handleChange}
              />
              <input
                type="text"
                className="form-control my-2"
                id="language"
                placeholder="Language"
                onChange={this.handleChange}
              />
              <input
                type="number"
                className="form-control my-2"
                id="score"
                placeholder="Your Score"
                onChange={this.handleChange}
              />
              <div className="form-check form-check-inline">
                <label className="form-check-label" htmlFor="inlineRadio1">
                  <b style={{ position: "relative", top: -2 }}> Male</b>
                </label>
                <input
                  className="form-check-input mx-2"
                  type="radio"
                  value="male"
                  name="gender"
                  onChange={this.handleChange}
                ></input>
              </div>
              <div className="form-check form-check-inline">
                <label className="form-check-label" htmlFor="inlineRadio1">
                  <b style={{ position: "relative", top: -2 }}> Female</b>
                </label>
                <input
                  className="form-check-input mx-2"
                  type="radio"
                  name="gender"
                  value="female"
                  onChange={this.handleChange}
                ></input>
              </div>
              <br />
              <button className="btn btn-outline-info btn-md mt-2">Add</button>
            </div>
          </fieldset>
        </form>
      </div>
    );
  }
}

export default AddUser;

它打印的是未定义的 我不知道是什么问题

Answer 1

你可以通过道具传递数据，从子组件中获取数据。

getDataFromUserList()是一个道具，它将从子程序中获取数据。

constructor(props){
        super(props);
        this.state = {
            users: [
                {
                    name: "ali",
                    lastname: "ahmadi",
                    language: "python",
                    gender: "male",
                    score: 100,
                },
                {
                    name: "Ahmad",
                    lastname: "moradi",
                    language: "JavaScript",
                    gender: "male",
                    score: 90,
                },
            ],
        };
        this.getDataFromUserList = this.getDataFromUserList.bind(this)
    }

 getDataFromUserList(data){
        // Will get the value in data from the child
        console.log(data);
    }

 <UserList users={this.state.users} removeUser={this.removeUser} getDataFromUserList={this.getDataFromUserList}/>

在用户列表页面中用户getDataFromUserList函数将作为一个props.这个props又作为props名getDataFromAddUser传递给AddUser组件。

const UserList = (props) => {
    const { users } = props;

    console.log(users);

    return (
        <div className="container">
            <h1 className="text-center mt-4" style={{ fontFamily: "tahoma" }}>
                All Users
      </h1>
            <AddUser getDataFromAddUser={(data) => { props.getDataFromUserList(data)}} />
        </div>
    );
};

export default UserList;

在addUser组件中，从表单中设置的状态值通过用户列表组件使用props进行传递，从用户列表组件中将数据传递给用户。你将在用户组件的getDataFromUserList()函数中获得addUser中的值。

<button className="btn btn-outline-info btn-md mt-2" onClick={() => { this.props.getDataFromAddUser(this.state)}}>Add</button>

Answer 2

你这里有一个错字。import UserList from "./userList";

应该是 import UserList from "./UserList";