在反应中将值从孩子发送给父母

Question

我想通过按钮将输入与位于同一组件中的组件分开，因此我将它们放在另一个组件中，但问题在于访问父组件中的这些状态，以便我可以捕获它们并在提交时使用这些值，那我该如何解决呢？

export default function Parent() {
  const handleSubmit = () => {
    console.log(name, email); // I wanna access those child states here
  }


  return (
    <div>
      <Form />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

export default function Child() {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')

  return (
    <form>
      <input placeholder="name" value={name} onChange={e => setName(e.target.value)} />
      <input placeholder="email" value={email} onChange={e => setEmail(e.target.value)} />
    </form>
  );
};

Answer 1

您可以lift the state up 使其存在于父级并传递给子级，以便双方都可以看到和使用它：

function Parent() {
  const [name, setName] = React.useState('')
  const [email, setEmail] = React.useState('')
  const handleSubmit = () => {
    console.log(name, email); // I wanna access those child states here
  }
  return (
    <div>
      <Child {...{ name, setName, email, setEmail }} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

function Child({ name, setName, email, setEmail }) {
  return (
    <form>
      <input placeholder="name" value={name} onChange={e => setName(e.target.value)} />
      <input placeholder="email" value={email} onChange={e => setEmail(e.target.value)} />
    </form>
  );
};

ReactDOM.render(<Parent />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>

Answer 2

最好在父组件而不是子组件中创建和处理钩子。

export default function Parent() {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const handleSubmit = () => {
    console.log(name, email); // I wanna access those child states here
  }


  return (
    <div>
      <Child name={name} email={email}
      setName={setName}
      setEmail={setEmail}
      />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

function Child(props) {
 const {name, email, setName,setEmail } = props;
  return (
    <form>
      <input placeholder="name" value={name} onChange={e => setName(e.target.value)} />
      <input placeholder="email" value={email} onChange={e => setEmail(e.target.value)} />
    </form>
  );
};

Live working demo

Answer 3

你可以保留父组件中的状态并将状态和 setState 作为 props 传递给子组件，子组件的职责是显示它作为输入和调用处理程序（即 setState 由父传递props) 如果有变化元素

Answer 4

Parent 将无法直接访问 Child 内部的状态。

一种解决方案是按照某些性能的回答的建议提升状态。

另一种解决方案是将提交按钮放在子项内部并传递回调以访问提交时的输入值，以避免传递太多不同的道具。

export default function Parent() {
  const handleSubmit = (name,email) => {
    // do whatever you want with name and email here
    console.log(name, email);
  }


  return (
    <div>
      <Form onSubmit={handleSubmit} />
    </div>
  );
};

export default function Child({onSubmit}) {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')

  return (
    <form>
      <input placeholder="name" value={name} onChange={e => setName(e.target.value)} />
      <input placeholder="email" value={email} onChange={e => setEmail(e.target.value)} />
      <button onClick={()=>onSubmit(name,email)}>submit</button>
    </form>
  );
};```

Answer 5

使用 props 将父函数传递给子函数。提交子表单时，它会调用父表单。或者，您可以按照其他答案的建议提升状态，这是个好主意。

请注意，子组件没有处理表单提交，如果用户在其中一个文本框中按下回车，它将触发重新加载。

这样的事情（不是解除状态，但你也可以这样做）：

export default function Parent() {
  const handleSubmit = (name, email) => {
    console.log(name, email); // I wanna access those child states here
  }

  return (
    <div>
      <Form onSubmit={handleSubmit} />
      
    </div>
  );
};

export default function Child({onSubmit}) {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')

  return (
    <form onSubmit={e => { e.preventDefault(); onSubmit(name, email); }}>
      <input placeholder="name" value={name} onChange={e => setName(e.target.value)} />
      <input placeholder="email" value={email} onChange={e => setEmail(e.target.value)} />
      <button>Submit</button>
    </form>
  );
};