ReactJS 中点击外部时更新输入框

Question

我正在尝试更新数据库。所以我有一个默认禁用的输入字段。因此，当您单击时，编辑会被启用，而当您在输入字段之外单击时，编辑会再次被禁用。我想做的是当您单击输入字段之外时进行更新。所以，我的输入是这样的：

const InputPrice = ({ mainPricePosts, handleChange }) => {
  const [disabled, setDisabled] = useState(true);
  const [priceValue, setPriceValue] = useState(mainPricePosts);

  function handleClick() {
    if (disabled === true) {
      setDisabled(false);
    }
  }

  return (
    <>
    <Form.Control
      type="text"
      className="price_coefficient_input"
      value={priceValue}
      onBlur={() => {
        setDisabled(true);
        handleChange(priceValue);
      }}
      onChange={handleChange(mainPricePosts)}
      readOnly={disabled}
      onClick={handleClick}
    />
    </>
  );
};

InputPrice.propTypes = {
  mainPricePosts: PropTypes.object.isRequired,
  handleChange: PropTypes.func.isRequired,
};

export default InputPrice;

这就是我尝试更新的方式，但我不确定我是否正确地从输入字段获取值：

const [updatePosts, setUpdatePosts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);
  const [show, setShow] = useState(false);
  const [showError, setShowError] = useState(false);
  const handleClose = () => setShow(false);
  const handleCloseError = () => setShowError(false);

  const fetchIndividualPosts = async ({ value, post: { mainPricePosts, key } = {} }) => {
    console.log(value);
    try {
      setLoading(true);
      const res = await Axios({
        method: "POST",
        url: `url`,
        headers: {
          "content-Type": "application/json",
        },
        data: {
          updated_parameter: ["main_price", "small_car", key],
          updated_value: value,
        },
      });
      if (res.status === 200) {
        setUpdatePosts(res.data);
      }
      setLoading(false);
    } catch (err) {
      console.log(err.response.status);
      setError(err.response.data.error);
      setLoading(false);
    }
  }; 

  const handleChange = (mainPricePosts) => (e) => {
    fetchIndividualPosts({ mainPricePosts, value: e.target.value });
  };

这也是我如何更新数据的curl：

curl -L -i -H "Content-Type: application/json" -X POST -d '{
              "updated_parameter":["100"],
              "updated_value":"0.044"
      }'  $ip''

所以updated_value应该是更新后的输入（点击外面之后的值） 100，应该是输入值的key。

希望它很清楚，你可以帮助我解决这个问题。

感谢您事先的帮助。

Answer 1

有很多方法可以实现你所需要的，但我会使用以下方法。

在

InputPrice

事件的

onBlur

组件中，如果新价格值和原始价格值不同，我将通过调用

setDisabled(true)

禁用输入，然后使用

useEffect

钩子调用

handleChange

回调。因为您正在调用

setDisabled(true)

，所以您实际上是在重新渲染

InputPrice

组件，因此不会执行

handleChange

回调。

查看下方二维码。

  const InputPrice = ({ mainPricePosts, handleChange }) => {
  const [disabled, setDisabled] = useState(true);
  const [priceValue, setPriceValue] = useState(mainPricePosts);

  function handleClick() {
    if (disabled === true) {
      setDisabled(false);
    }
  }
  
 useEffect(() => {
    let callUpdateCallback = false;
    if (priceValue !== mainPricePosts) callUpdateCallback = true;
    if (disabled && callUpdateCallback) handleChange(priceValue);
 }, [disabled, priceValue, handleChange, mainPricePosts]);

  return (
    <>
    <Form.Control
      type="text"
      className="price_coefficient_input"
      value={priceValue}
      onBlur={setDisabled(true)}
      onChange={(e) => setPriceValue(e.target.value)}
      readOnly={disabled}
      onClick={handleClick}
    />
    </>
  );
};

InputPrice.propTypes = {
  mainPricePosts: PropTypes.object.isRequired,
  handleChange: PropTypes.func.isRequired,
};

export default InputPrice;

你可以这样称呼这个组件

import React from "react";
import ReactDOM from "react-dom";
import InputPrice from "./InputPrice";

function App() {
  const handleChange = (e) => {
    console.log("app handle change", e);
    // You can call your fetch here...
  };
  return (
    <div>
      <InputPrice mainPricePosts="500" handleChange={handleChange} />
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));

此外还有用于调试它的codesandbox，因此如果您需要更多详细信息，可以在下面的链接中找到它。

https://codesandbox.io/s/reactjs-playground-forked-8vwe2?file=/src/index.js:0-364