Question

我在这个容器中放置了，并且未将其放置在同一层。单击按钮（位于父项上）时，如何获取表单的状态？

我已经创建了一个演示来解决我的问题。

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  save = () => {
    alert("how to get state of Form?");
    //fire api call
  };
  render() {
    return (
      <div>
        <Form />
        <button onClick={this.save}>save</button>
      </div>
    );
  }
}

我不想做的一件事就是同步onChange事件的状态，因为在Form中可能还有另一个Form。

Answer 1

要从父级访问子实例，您需要了解ref：

首先，在您的App类顶部添加formRef：

formRef = React.createRef();

然后在App渲染中，将ref属性传递给您的Form标签：

<Form ref={this.formRef} />

最后，从子窗体获取状态：

save = () => {
    alert("how to get state of Form?");

    const form = this.formRef.current;
    console.log(form.state)
};

结帐演示here

Answer 2

理想情况下，您的表单提交操作属于Form组件您可以将button放入From组件中，然后将一个提交回调传递给表单。

  class App extends React.Component {
  constructor(props) {
    super(props);
  }

   save = (data) => {
     // data is passed by Form component
    alert("how to get state of Form?");
    //fire api call
  };
  render() {
    return (
      <div>
        <Form onFormSubmit={this.save} />
      </div>
    );
  }
}

Answer 3

您可以这样编写代码

https://codesandbox.io/s/23o469kyx0

Answer 4

如前所述，可以使用ref获取有状态的组件实例并访问状态，但这会破坏封装：

<Form ref={this.formRef}/>

一种更可取的方法是重构Form以处理这种情况，即接受onChange回调道具，该道具将在表单状态更改时触发：

<Form onChange={this.onFormChange}/>

我不想做的一件事就是同步onChange事件的状态，因为在Form中可能还有另一个Form。

表单将需要以任何方式进行处理；祖父母的裁判不可能达到嵌套形式。 lifting the state up可能就是这种情况。

例如在父组件中：

  state = {
    formState: {}
  };

  onFormChange = (formState) => {
    this.setState(state => ({
      formState: { ...state.formState, ...formState }
    }));
  }

  render() {
    return (
      <Form state={this.state.formState} onChange={this.onFormChange} />
    );
  }

在表单组件中：

  handleChange = e =>
    this.props.onChange({
      [e.target.name]: e.target.value
    });

  render() {
    return (
        <input
          onChange={this.handleChange}
          name="firstName"
          value={this.props.state.firstName}
        />
    );
  }

这里是demo。

反应：获取父组件中子组件组件的状态

4 个答案: