0

我有这个容器，并且没有放置在同一级别。当我单击按钮（放置在父级上）时，如何获取表单的状态？

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

https://codesandbox.io/s/kmqw47p8x7

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。
4

4 回答 4

7

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

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

formRef = React.createRef();

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

<Form ref={this.formRef} />

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

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

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

在这里结帐演示

于 2018-10-23T06:31:47.263 回答
0

理想情况下，您的表单提交操作属于该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>
    );
  }
}
于 2018-10-23T06:29:39.413 回答
0

你可以这样写代码

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

于 2018-10-23T06:32:04.803 回答
0

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

<Form ref={this.formRef}/>

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

<Form onChange={this.onFormChange}/>

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

表单将需要以任何方式处理此问题；使用祖父母的 ref 达到嵌套形式是不可能的。这可能是提升国家的情况。

例如在父组件中：

  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}
        />
    );
  }

这是一个演示。

于 2018-10-23T06:57:31.783 回答