React.js中如何将组件状态传递至另一个组件？新手求助

嘿，作为React新手遇到组件传值的问题太正常啦，我来一步步帮你搞定这个需求：

首先得指出你代码里的一个小问题：当前handleChange函数的写法有问题，它会把所有状态都设置成同一个输入值，这显然不是你想要的。我们先把这个函数修正过来，它只需要根据当前输入框的name属性来更新对应的状态就好。

接下来分三步实现你的需求：

1. 修正ComposedTextField的handleChange方法 #

原来的写法会同时更新四个状态，正确的写法应该是：

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

这样每次输入时，只会更新对应name属性的状态值，比如输入name框时，就只更新state.name。

2. 在ComposedTextField中传递状态给Header组件 #

在ComposedTextField的render方法里，渲染Header组件的时候，把你的四个状态作为props传进去：

// 在ComposedTextField的render方法里，添加Header组件
return (
  <div>
    {/* 原来的表单部分保持不变 */}
    <Typography variant="headline">Header Info</Typography>
    {/* ... 这里省略原来的四个FormControl代码 ... */}
    
    {/* 新增Header组件，传递state里的值作为props */}
    <Header 
      name={this.state.name}
      title={this.state.title}
      email={this.state.email}
      experience={this.state.experience}
      classes={this.props.classes} // 保留原来的props
      avatar={this.props.avatar}
    />
  </div>
);

3. 修改Header组件接收并展示传递过来的值 #

把Header里硬编码的内容替换成传递过来的props值：

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

这里我加了默认值，确保在用户还没输入的时候，Header也能显示原来的示例内容。

完整的ComposedTextField组件 #

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

  handleChange = event => {
    const { name, value } = event.target;
    this.setState({ [name]: 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>
        
        {/* 传递状态给Header组件 */}
        <Header 
          name={this.state.name}
          title={this.state.title}
          email={this.state.email}
          experience={this.state.experience}
          classes={classes}
          avatar={this.props.avatar}
        />
      </div>
    );
  }
}

完整的Header组件 #

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

这样一来，当你在ComposedTextField的输入框里输入内容时，Header组件就会实时显示对应的状态值啦！

内容的提问来源于stack exchange，提问作者HemalHerath