时间戳

首页 > 解决方案 > 从父级控制同级组件

javascript - 从父级控制同级组件

问题描述

我正在使用 REACT 创建一个页面，并且我有包含 2 个子组件的父组件。

class Page extends Component {
    render() {
        return (
            <SubmitButton>
            <ResetButton>
            <Form />
        );
    }
}

class Form extends Component {

    render() {
        return (
                <Grid container spacing={3}>
                    <Grid item xs={3}>
                        <TextField
                            fullWidth
                            label="Name"
                            name="name"
                            onChange={this.handleChange}
                            value={data.name}
                        />
                    </Grid>
                    ...
                </Grid>
        );
    }
}

我正在尝试重置或提交表单的值。我读过我需要从父级控制子级（表单）的状态，但我该怎么做呢？我不想使用参考。也许这不是一个合适的设计，但按钮必须在表单组件之外。在这种情况下使用非受控组件而不是受控组件是更好的选择吗？我是 React 新手，所以欢迎任何帮助。

编辑：这里的答案真的帮助我理解了正确的方法。

标签： javascriptreactjs

解决方案

需要在 parent 中设置一个 state，并将数据作为 props 传递给 child。状态的变化将触发 React 组件的重新渲染。我给出了一个简单的重置按钮示例。

class Page extends Component {
  state = {
    name: "someString"
  };

  render() {
    const { name } = this.state;
    return (
      <div>
        <SubmitButton> </SubmitButton>
        <button onClick={() => this.setState({ name: "" })}> </button>
        <Form data={name}> </Form>
      </div>
    );
  }
}
class Form extends Component {

render() {
const {data} = this.props;
    return (
            <Grid container spacing={3}>
                <Grid item xs={3}>
                    <TextField
                        fullWidth
                        label="Name"
                        name="name"
                        onChange={this.handleChange}
                        value={data}
                    />
                </Grid>
                 </Grid>

    );
}

我还建议你看一些关于状态的 React 教程。甚至官方文档也对这个主题有很好的解释 https://reactjs.org/docs/state-and-lifecycle.html

阅读有关状态 https://medium.com/the-andela-way/understanding-the-fundamentals-of-state-in-react-79c711be677f

推荐阅读