如何在 React js 中将状态从一个组件传递到另一个组件？

Question

我有像下面这样的组件，它有 4 个状态值

class ComposedTextField extends React.Component {
  state = {
    name: '',
    title: '',
    email: '',
    experience: ''
  };

  handleChange = event => {
    this.setState({ 
          [event.target.name]:event.target.value,
          [event.target.title]:event.target.value,
          [event.target.email]:event.target.value,
          [event.target.experience]:event.target.value
        });
  };

  render() {
    const { classes } = this.props;

    return (
      <div>
        <Typography variant="headline">Header Info</Typography>
        <FormControl fullWidth className={classes.formControl}>
          <InputLabel htmlFor="name-simple">Name</InputLabel>
          <Input name="name" value={this.state.name} id="name-simple" onChange={this.handleChange}/>
        </FormControl><br></br>
        <FormControl fullWidth className={classes.formControl}>
          <InputLabel htmlFor="title-simple">Title</InputLabel>
          <Input name="title" id="title-simple" value={this.state.title} onChange={this.handleChange}/>
        </FormControl><br></br>
        <FormControl fullWidth className={classes.formControl}>
          <InputLabel htmlFor="email-simple">Email</InputLabel>
          <Input name="email" id="email-simple" value={this.state.email} onChange={this.handleChange}/> 
        </FormControl><br></br>
        <FormControl fullWidth className={classes.formControl}>
          <InputLabel htmlFor="experience-simple">Experience</InputLabel>
          <Input name="experience" id="experience-simple" value={this.state.experience} onChange={this.handleChange}/>
        </FormControl><br></br>
      </div>
    );
  }
}

我需要将这 4 个值传递给另一个组件

function Header(props) {
  const { classes, avatar } = props;
  return (
    <div>
              <Typography variant="headline">KASUN FERNANDO</Typography>
              <Typography variant="subheading" color="textSecondary">
              SENIOR DESIGNER-UI/UX
              </Typography>
              <Typography variant="subheading" color="textSecondary">
              mickey@crowderia.com
              </Typography>
              <Typography variant="subheading" color="textSecondary">
              4+ years of experience
              </Typography>
    </div>
  );
}

在这个组件中有 4 个排版，我需要在 4 个排版中显示该状态值

我该怎么做，请帮助我是 React js 的新手

Answer 1

关于如何在组件之间管理/传递状态有很多非 redux、mobx、flux 策略 - Props、Instance Methods、Callbacks 等。你可以在 component communication 上阅读这篇文章。在使用重量级的状态管理框架之前，您可能想看看这些。

根据给出的代码，我假设标头是更高级别的组件。对于孩子与父母的交流，您可以使用callback functions

父母会将函数作为道具传递给孩子，如下所示：

<MyChild myFunc={this.handleChildFunc} />

孩子会这样调用该函数：

this.props.myFunc();

Answer 2

这两个组件有什么关系？

它们有相同的父组件吗？

如果是，您可以处理父组件中的状态并将处理函数作为 CompposedTextField 调用 onChange 的道具传递给 ComposedTextField

class ParentComponent extends React.Component {
  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.value,
    })
  }

  render() {
    return (
      <div>
        <HeaderComponent {...this.state} />
        <ComposedTextField onChange={this.handleChange} {...this.state}/>
      </div>
    )
  }
}

然后在您的 ComposedTextField 中，您将拥有类似的东西

class ComposedTextField extends React.Component {


  render() {
    const { classes } = this.props

    return (
      <div>
        <Typography variant="headline">Header Info</Typography>
        <FormControl fullWidth className={classes.formControl}>
          <InputLabel htmlFor="name-simple">Name</InputLabel>
          <Input
            name="name"
            value={this.props.name}
            id="name-simple"
            onChange={this.props.onChange}
          />
        </FormControl>
        <br />
        <FormControl fullWidth className={classes.formControl}>
          <InputLabel htmlFor="title-simple">Title</InputLabel>
          <Input
            name="title"
            id="title-simple"
            value={this.props.title}
            onChange={this.props.onChange}
          />
        </FormControl>
        <br />
        <FormControl fullWidth className={classes.formControl}>
          <InputLabel htmlFor="email-simple">Email</InputLabel>
          <Input
            name="email"
            id="email-simple"
            value={this.props.email}
            onChange={this.props.onChange}
          />
        </FormControl>
        <br />
        <FormControl fullWidth className={classes.formControl}>
          <InputLabel htmlFor="experience-simple">Experience</InputLabel>
          <Input
            name="experience"
            id="experience-simple"
            value={this.props.experience}
            onChange={this.props.onChange}
          />
        </FormControl>
        <br />
      </div>
    )
  }
}

您的标题组件将使用道具显示设置值，例如

function Header(props) {
  const { classes, avatar } = props
  return (
    <div>
      <Typography variant="headline">{props.name}</Typography>
      <Typography variant="subheading" color="textSecondary">
        {props.title}
      </Typography>
    </div>
  )
}

Answer 3

要实现它，你应该引入一些全局状态机制（Redux、MobX、...）。

handleChange - 而不是将数据设置为组件的状态 - 将调度将数据写入全局状态的操作，允许任何其他组件（如 Header）从中读取数据。