Question

所以我有一个React网页。

父组件包含所有子组件（下拉菜单，单选按钮，表格等）。一旦我用按钮提交了所有表单，我希望所有组件状态都返回null。

在没有Redux的情况下是否有可能？我知道我绝对应该在这一点上使用Redux，并且我将在接下来的几天里开始学习它，但是在我开始尝试之前，如果我想做的事情是可能的/不可能的，我只是想把头缠起来。没有React。

只是为了省心和充分理解。

Answer 1

您可以将所有状态值保留在父组件中，并通过更改处理程序将其作为道具传递给您的演示组件。然后，您可以在提交表单时重置整个状态。这可能是最“反应灵敏”的方式。

如果您不想这样做，可以将“重置”道具传递给每个子组件，当该道具变为true时，重置状态，然后重置父项“重置”道具回到假。但是，我个人认为这不是实现此目的的好方法，因此强烈建议您选择第一种方法。

编辑：您绝对不需要引入redux即可完成您要执行的操作

Answer 2

在我投票时，我建议使用@Nick Swope的逻辑。不过，我想提供两个示例。我不确定这是否适合您的情况，但这是示例。

class App extends React.Component {
  state = {
    name: "",
    select: "",
  }

  defaultState = {
    name: "",
    select: "",
  };


  handleChane = e => this.setState( {
    [ e.target.name ]: e.target.value,
  } );

  handleSubmit = ( e ) => {
    e.preventDefault();
    alert( JSON.stringify( this.state ) );
    this.setState( this.defaultState );
  }

  render() {
    console.log( this.state );
    return (
      <form onSubmit={this.handleSubmit} >
        <Input onChange={this.handleChane} />
        <Select onChange={this.handleChane} />
        <button>Send</button>
      </form>
    );
  }
}

const Input = props => (
  <div>
    <input onChange={props.onChange} name="name" />
  </div>
);

const Select = props => (
  <div>
    <select onChange={props.onChange} name="select">
      <option>Choose one</option>
      <option>Foo</option>
      <option>Bar</option>
      <option>Baz</option>
    </select>
  </div>
);

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

在此示例中，您保留默认状态，并在提交表单后重置状态。如您所见，表单值仍然存在。现在，这是第二种选择：

class App extends React.Component {
  state = {
    name: "",
    select: "",
  }

  defaultState = {
    name: "",
    select: "",
  };

  formRef = React.createRef();

  handleChane = e => this.setState( {
    [ e.target.name ]: e.target.value,
  } );

  handleSubmit = ( e ) => {
    e.preventDefault();
    alert( JSON.stringify( this.state ) );
    this.setState( this.defaultState );
    this.formRef.current.reset();
  }

  render() {
    console.log( this.state );
    return (
      <form ref={this.formRef} onSubmit={this.handleSubmit} >
        <Input onChange={this.handleChane} />
        <Select onChange={this.handleChane} />
        <button>Send</button>
      </form>
    );
  }
}

const Input = props => (
  <div>
    <input onChange={props.onChange} name="name" />
  </div>
);

const Select = props => (
  <div>
    <select onChange={props.onChange} name="select">
      <option>Choose one</option>
      <option>Foo</option>
      <option>Bar</option>
      <option>Baz</option>
    </select>
  </div>
);

在这里，您可以保留自己的状态并使用ref清除表单。我无法将其添加到代码段中，因为React版本在这里有点老了。

Answer 3

父组件可以具有reset状态，该状态由表单提交按钮触发，并将其作为道具传递给其子级，在您的情况下，所有表单元素（下拉菜单，单选按钮，表格，等）。

然后，孩子们可以在其生命周期挂钩（componentWillReceiveProps或getDerivedStateFromProps）中对此reset道具做出反应。

Answer 4

一些简单的选项：

1）重新加载整个页面：

  location.reload();

2）重新安装App组件：

 reactDOM.unmount(document.body);
 reactDOM.render(<App />, document.body);

如何从父组件更改孩子的状态

4 个答案: