在 React-Leaflet 容器中键入单个字符后，带有钩子的 React 表单会重新呈现

Question

我有一个带有 textarea 元素的反应表单，在输入每个字符后基本上都会重新渲染或“失去焦点”。我知道这个问题已经在 SO 上详细讨论过，但我想知道我的情况是否会因为表单在 react-leaflet 的 Popup 容器中的位置而有所不同。 SO上针对这种情况提供的许多答案表明该组件是在渲染函数中定义的。我看到one suggestion 与样式化组件相关，这促使我提出这个问题。由于使用了 Popup 容器，我是否隐式地重新呈现了我的表单？还是我可能忽略了我的返回函数的使用？感谢您阅读本文 - 如果您有任何想法，我将不胜感激。

[编辑] 我已经进行了进一步的测试，我的表单/文本区域在 Leaflet 弹出窗口之外按预期工作，并且按预期与 onchange 操作隔离。

在我的应用程序中，我的 app() 函数中定义了以下内容：

const [commentValue, setCommentValue] = React.useState({
        comment: ""
    })
function handleCommentSubmit(e) {
        e.preventDefault();
        console.log('submitted comment');
        console.log(commentValue);
    }

    function handleCommentValue(e) {
        console.log('value is' + commentValue)
        setCommentValue({
            [e.target.name]: e.target.value
        });
    }

广泛的应用程序函数返回我的 React.Fragment，其中包含我的传单地图和以下带有表单的弹出窗口：

{activePark && (
        <Popup
        position={[
          activePark.ycoord,
          activePark.xcoord
        ]}
        onClose={() => {
          setActivePark(null);
        }}
        >

        <div>
          <h2>{activePark.name}</h2>
          <p>{activePark.description}</p>

        </div>

        <div>
        <form onSubmit={handleCommentSubmit}>
            <label>
                Add Comment:
             <textarea name="comment" onChange={handleCommentValue} value={commentValue.comment}  />
            </label>
            <input type="submit" value="Submit" />
        </form>
        </div>
        </Popup>
      )}

根据 Mark 的建议，包括下面的 activePark 相关代码：

//declared in my main app function 
const [activePark, setActivePark] = React.useState(null);

/*Declared in the app function's return; park is just json that I've fetched from my flask api*/ 
<Marker 
        key={park.id} 
        position={[
          park.ycoord,
          park.xcoord
        ]}

        eventHandlers={{click: () => {
          setActivePark(park);
          console.log('marker clicked')}, }}
        
        icon={skater}


        />

Answer 1

如果您将如下所示的回调传递给setCommentValue()，这应该可以：

function handleCommentValue(e) {
  console.log('value is' + commentValue)
  setCommentValue(prevState => ({
     ...prevState,
     [e.target.name]: e.target.value
  }));
}