从 React 状态函数组件中获取数据

Question

我有 2 个功能组件，一个有输入和按钮，并将数据传递给状态。现在我想从第一个函数连接到第二个组件获取状态数据，并在第二个组件中向我的 div 显示文本。是否可以将状态数据从第一个组件共享到第二个组件？该组件是非类

的函数

function Articles(){
  return(<div>
    <h1>{inputtext}</h1>
  </div>)
}

function Inputform() {
  const [inputtext, setInputtext] = useState('');
  const [task_list,setTask_list] = useState([]);

  function changer(event){
    setInputtext(event.target.value);
  }
  function add_post(){
    setTask_list(inputtext);
  }

  return (
    <div>
    <label>Post</label>
    <input name="first" onChange={changer} />
    <button onClick={add_post}>Dodaj</button>
    </div>
  )
}

试图从输入中获取文章中的状态，但它不起作用

Answer 1

状态属于一个组件。它不会创建全局变量。

如果你想将数据从一个状态传递到另一个组件，那么：

接收者必须是保存数据的元素的子元素
您可以将其作为 prop

因为你没有 <Article propName={stateVariable} /> 你不能这样做。

如果目标不是保持状态的元素的子元素，那么您需要 Lift State Up。

将 useState 挂钩移动到作为 <Article> 和 <Inputform>
将 set 函数作为 prop 传递给 <Inputform>
将状态值变量作为 prop 传递给 <Article>。

对于共同祖先与需要使用状态的组件相距很远的复杂系统，您可以考虑使用 Context or an external state management system like Redux。

Answer 2

你想做的是将这两个组件放在第三个组件中，让它们共享任何你想要的 states/data。

function ThirdComponent() {
    const [inputtext, setInputtext] = useState('');
    const [task_list,setTask_list] = useState([]);

    function Articles(){
      return(<div>
       <h1>{inputtext}</h1>
      </div>)
    }
    function Inputform() {
      
      function changer(event){
        setInputtext(event.target.value);
      }
      function add_post(){
        setTask_list(inputtext);
      }

      return (
        <div>
           <label>Post</label>
           <input name="first" onChange={changer} />
           <button onClick={add_post}>Dodaj</button>
        </div>
     )
    }
    return (
        <>
        </>
    ) 
}

从 React 状态函数组件中获取数据

Getting data from react state function component

javascript

state

reactjs