在reactJS中文本框的div外部单击时，将编辑的文本框值更改为原始传递的值

在ReactJS中，要实现在文本框的div外部单击时将编辑的文本框值更改为原始传递的值，可以通过以下步骤实现：

首先，在React组件的state中定义一个变量来保存文本框的值和原始传递的值。例如，可以定义两个变量originalValue和editedValue，并将原始传递的值赋给originalValue。
在文本框的div外部单击事件的处理函数中，将editedValue的值重置为originalValue。
在文本框的onChange事件处理函数中，更新editedValue的值为用户输入的新值。
在渲染组件时，将editedValue绑定到文本框的value属性上，以便显示用户编辑的值。

下面是一个示例代码：

import React, { useState } from 'react';

const TextBox = ({ initialValue }) => {
  const [originalValue, setOriginalValue] = useState(initialValue);
  const [editedValue, setEditedValue] = useState(initialValue);

  const handleOutsideClick = () => {
    setEditedValue(originalValue);
  };

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

  return (
    <div onClick={handleOutsideClick}>
      <input type="text" value={editedValue} onChange={handleChange} />
    </div>
  );
};

export default TextBox;

在上述示例中，TextBox组件接收一个名为initialValue的prop，用于传递原始的文本框值。组件内部使用useState钩子来定义originalValue和editedValue的状态，并通过setOriginalValue和setEditedValue函数来更新它们的值。

在handleOutsideClick函数中，当用户在文本框的div外部单击时，将editedValue的值重置为originalValue，实现将编辑的文本框值更改为原始传递的值。

在handleChange函数中，当用户在文本框中输入新值时，更新editedValue的值为用户输入的新值。

最后，在渲染组件时，将editedValue绑定到文本框的value属性上，以便显示用户编辑的值。

这样，当用户在文本框的div外部单击时，文本框的值将被更改为原始传递的值。