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个typogrphy我需要在4个排版中显示该状态值

我怎么能这样做，请帮我修改React js

Answer 1

关于如何在组件之间管理/传递状态，有很多非redux，mobx，flux策略 - Props，Instance Methods，Callbacks等。您可以阅读本文component communication。在使用重量级状态管理框架之前，您可能需要先了解这些内容。

从给出的代码中，我假设header是一个更高级别的组件。对于从孩子到父母的沟通，您可以使用callback functions

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

<MyChild myFunc={this.handleChildFunc} />

孩子会这样称呼这个函数：

this.props.myFunc();

Answer 2

这两个组件有何关联？

他们是否有相同的父组件？

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

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）将被允许读取。< / p>

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

3 个答案: