React 钩子从孩子更新父状态 - JavaScript

在 React 中，组件之间的通讯可以通过 props 和状态来实现。父组件可以将数据通过 props 传递给子组件，子组件可以通过调用父组件传递的函数来改变父组件的状态。然而，在一些情况下，需要从子组件直接更新父组件的状态，这就需要用到 React 钩子。

子组件如何更新父组件的状态

子组件想要更新父组件的状态，需要通过 props 传递一个回调函数给子组件。子组件在需要更新父组件的状态时，调用这个回调函数，将需要的状态数据传递给父组件。父组件在接收到子组件传递过来的 props，然后调用这个回调函数，将子组件传递过来的状态数据更新到自己的状态中。这样就可以实现从子组件更新父组件的状态了。

下面是一个例子：

// 父组件
function Parent() {
  const [name, setName] = useState("Tom");

  const updateName = (newName) => {
    setName(newName);
  }

  return (
    <div>
      <h1>My name is {name}</h1>
      <Child updateName={updateName} />
    </div>
  );
}

// 子组件
function Child({ updateName }) {
  const handleChange = (event) => {
    const newName = event.target.value;
    updateName(newName);
  }

  return (
    <div>
      <label htmlFor="name">Enter your name: </label>
      <input id="name" type="text" onChange={handleChange} />
    </div>
  );
}

在这个例子中，父组件通过 props 将 updateName 函数传递给了子组件。子组件通过调用这个函数，将修改后的名字值传递给父组件，从而从子组件更新父组件的状态。

使用 React 钩子实现从子组件更新父组件的状态

React 钩子是 React 16.8 开始引入的新特性，它可以让我们在函数式组件内部使用状态和其他 React 特性。使用钩子可以让代码更加简洁并且易于理解。下面是一个使用钩子的例子：

function Parent() {
  const [name, setName] = useState("Tom");

  return (
    <div>
      <h1>My name is {name}</h1>
      <Child setName={setName} />
    </div>
  );
}

function Child({ setName }) {
  const [inputValue, setInputValue] = useState("");

  const handleChange = (event) => {
    setInputValue(event.target.value);
  }

  const handleSubmit = () => {
    setName(inputValue);
  }

  return (
    <div>
      <label htmlFor="name">Enter your name: </label>
      <input id="name" type="text" value={inputValue} onChange={handleChange} />
      <button onClick={handleSubmit}>Update Name</button>
    </div>
  );
}

在这个例子中，使用了 useState 这个钩子创建了 name 和 inputValue 两个状态。在子组件中，使用 inputValue 状态来输入待更新的名字数据。使用 handleSubmit 函数来调用父组件中的 setName 函数，从而更新父组件的状态。

结束语

在 React 中，通过 props 和状态可以实现组件之间的通讯。在一些情况下，需要从子组件直接更新父组件的状态，这就需要使用 React 钩子。本文中介绍了使用传统方式和 React 钩子两种方式实现从子组件更新父组件的状态。这些方法可以帮助你更好地掌握 React 的一些核心概念，进一步提高你的 React 技能。