关于 React 中的 useState

Question

我正在尝试了解 React 的基本原理，例如 useState、props、提升状态等。我有一个输入字段和一个按钮，我想在输入字段中输入一些内容，按下按钮，然后该文本显示在组件的下方。我的组件如下所示：

import React, { useState } from 'react';
import './component2.css';


const Component2 = () => {
    const [enteredValue, setEnteredValue] = useState('');

    const valueChangeHandler = (event) => {
        setEnteredValue(event.target.value);
    }

    const submitHandler = (event) => {
        event.preventDefault();
    
    }

    return (
        <div className="card">
            <div>
                <label>Component 2</label>
                <form onSubmit={submitHandler}>
                    <label>type here:</label>
                 <input 
                        type="text"
                        onChange={valueChangeHandler}
                        
                    />
                 <button type="submit">add value</button>   
                </form>
                <div className="center">
                    {enteredValue}
                </div>
           </div>   
        </div>

    );
}

export default Component2;

现在，当我键入时文本会直接更改，而按钮什么也不做。 我尝试了各种各样的东西，但我错过了一些基本的东西。在我的 app.js 文件中，我有 3 个这样的组件，每个组件都有文本输入，我的目标是让按钮将文本从每个组件粘贴到其他组件。

Answer 1

键入时文本会发生变化，因为

<input ... onChange={valueChangeHandler} />

因此，当您输入此输入 (onChange) 时，valueChangeHandler 将运行并更新状态变量。当您提交表单时，您什么也不做。

如果您希望在提交表单时更新enteredValue，请从输入中删除onChange，并仅在提交处理程序中更新enteredValue。

Answer 2

如果您希望仅在按下按钮时显示输入，则必须在当前状态下方定义另一个状态，例如：

const [display, setDisplay] = useState(false)

然后您可以在提交时将状态从“false”更改为“true”。

const submitHandler = (event) => {
    event.preventDefault();
    setDisplay(true)
}

然后您可以根据显示是true 还是false 来切换值的可见性。

所以不是{enteredValue} 你可以写：

{display ? enteredValue : null}

Answer 3

您的表单提交处理程序什么都不做。

      const submitHandler = (event) => {
        event.preventDefault();
//do something
      };

你说：

我的目标是让按钮将文本从每个组件粘贴到 其他组件。

因此，您需要通过单击按钮将文本从每个组件发送到父组件，然后将它们作为道具传递。您可以通过将useState 声明的第二个数组参数作为道具传递下来来做到这一点。

我很高兴为您提供演示，但我需要更多信息。

ComponentA 的文本需要转到 ComponentB 吗？这里的目的是什么？