reactjs - 如何在 React 中进行参数传递

Question

我被困在这里，因为我是新来的反应，我的问题是如何在反应中通过道具传递论点。

这是我的代码，我想将一个参数从 oneComponent.js 传递给 anotherComponentjs。

OneComponentJs：

const EditProfile = props => {
  const avtar = [
    "avtar/avtar1.png",
    "avtar/avtar2.png",
    "avtar/avtar3.png",
    "avtar/avtar4.png",
    "avtar/avtar9.png",
    "avtar/avtar7.png"
  ];

  const avtars = (
    <CardGroup>
      {avtar.map((_avtar, index) => {
        return (
          <Card key={index}>
            <Image src={avtar[index]} thumbnail />
            <Button type="checkbox" variant="dark">
              Select me
            </Button>
          </Card>
        );
      })}
    </CardGroup>
  );

  let getName = event => {
    return event.target.value;
  };
  let getEmail = event => {
    return event.target.value;
  };

  return (
    <div>
      <Form onSubmit={props.edit(getName, getEmail, avtar[3])}>
        <Form.Group>
          <Form.Label className="text-info">Name</Form.Label>
          <Form.Control
            type="text"
            placeholder={props.name}
            onChange={getName}
          />
        </Form.Group>
        <Form.Group>
          <Form.Label className="text-info">Email</Form.Label>
          <Form.Control
            type="text"
            placeholder={props.email}
            onChange={getEmail}
          />
        </Form.Group>
        <Form.Group>
          <Form.Label className="text-info">Choose Avatar</Form.Label>
          {avtars}
        </Form.Group>
        <Form.Group>
          <Button type="submit">Update Your Profile</Button>
        </Form.Group>
      </Form>
    </div>
  );
};
export default EditProfile;

另一个组件.js

    class Profile extends Component {
  state = {
    profile: {
      name: "Pramod",
      email: "[e-mail]",
      avatar: "avtar/avtar1.png",
      dept: "HRDD"
    }
  };

  profileEditor = (_name, _email, _avatar) => {
    this.setState = {
      profile: {
        name: _name,
        email: _email,
        avatar: _avatar,
        dept: "HRDD"
      }
    };
  };

  render() {
    return (
      <div>
        <Row className="h-100">
          <Col xs lg={3}>
            <Card className="m-2 border-0">
              <Card.Body className="border-0 p-0">
                <Image
                  className="border-0 "
                  src={this.state.profile.avatar}
                  thumbnail
                />
              </Card.Body>
              <Card.Footer className="border-bottom ">
                <label className="h1 ">{this.state.profile.name}</label>
                <br />
                <label>{this.state.profile.email}</label>
                <br />
                <Button size="lg" variant="secondary" className="my-4" block>
                  Edit profile
                </Button>
                <Image
                  src="icon/dept.png"
                  style={{ height: "30px", width: "30px" }}
                />
                <label className="text-primary ml-2">
                  {this.state.profile.dept}
                </label>
              </Card.Footer>
            </Card>
          </Col>
          <Col xs lg={9}>
            <Col lg={11}>
              <Tabs defaultActiveKey="edit" className="mt-3 border-bottom">
                <Tab eventKey="files" title="Files" className="border-off">
                  <Row className="mt-3 px-4">
                    <Col lg={6}>
                      <Folder />
                    </Col>
                    <Col lg={6}>
                      <Folder />
                    </Col>
                  </Row>
                </Tab>
                <Tab
                  eventKey="addFiles"
                  title="Add File"
                  className="border-off"
                >
                  <Addfile />
                </Tab>
                <Tab
                  eventKey="fileUnderProcess"
                  title="File Under Process"
                  className="border-0"
                >
                  3
                </Tab>
                <Tab
                  eventKey="rejectFile"
                  title="Rejected File"
                  className="border-0"
                >
                  4
                </Tab>
                <Tab eventKey="edit" title="Edit Profile" className="border-0">
                  <EditProfile
                    name={this.state.profile.name}
                    email={this.state.profile.email}
                    edit={this.profileEditor}
                  />
                </Tab>
              </Tabs>
            </Col>
          </Col>
        </Row>
      </div>
    );
  }
}

导出默认配置文件；

这样我就可以得到这三个参数，这将改变我的状态。

标签： reactjs

Answer 1

在你的 oneComponent.js 中维护一些状态，然后将其传递给 anotherComponent.js。例如

OneComponent.js

state = {
    ['name']: '',
    ['email']: ''
}

let onNameChange = event => { // bind this function to your input field
    this.setState({['name']: event.target.value})
};
let onEmailChange = event => {
    this.setState({['email']: event.target.value})
};
onSubmit = e => {
    e.preventDefault();
    this.props.edit(this.state);
}
<Form onSubmit={this.onSubmit}>
</Form>

另一个组件.js

profileEditor = formData => {
    this.setState = {
      profile: {
        name: formData.name,
        email: formData.email,
        dept: "HRDD"
      }
    };
  };

干杯；）