如何在輸入 React JS 中有可變值？

Question

我試圖在輸入值中設置我的值，但在那之后，我無法在輸入字段中寫入任何內容！ 我想從后端設置值！

我們正在編寫一個管理員頻道來編輯文章，因為我們需要已經存在的文章值來編輯文章！ 我究竟做錯了什么！ 或者也許您可以建議一種更好的方法來編輯管理員頻道中的文章！

這是代碼：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useParams } from 'react-router';

const EditArticle = (props) => {
  const [editValues, setEditValues] = useState([]);
  const [changedValues, setChangedValues] = useState('');
  console.log('values', editValues);
  console.log('changed', changedValues);
  const params = useParams();
  console.log(params);
  const resultsId = params.id;
  console.log('string', resultsId);
  const [authTokens, setAuthTokens] = useState(
    localStorage.getItem('token') || ''
  );

  const setTokens = (data) => {
    localStorage.setItem('token', JSON.stringify(data));
    setAuthTokens(data);
    // setToken(data['dataValues']['token']);
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await axios.get(
          `${process.env.REACT_APP_API_URL}/article/${resultsId}`
        );
        setEditValues(res.data);
      } catch (err) {}
    };
    fetchData();
  }, [resultsId]);

  const inputValue = editValues;

  const userToken = props.token;
  return (
    <div>
      <form value={{ authTokens, setAuthTokens: setTokens }}>
        <input
          value={editValues.title || ''}
          onChange={(input) => setChangedValues(input.target.value)}
          type='text'
        />
        <input
          //   ref={editValues.shortDesc}
          value={editValues.shortDesc}
          onChange={(input) => setChangedValues(input.target.value)}
          type='text'
        />
        <button type='submit'>send</button>
      </form>
    </div>
  );
};

export default EditArticle;

Answer 1

你可以使用只使用editValues來完成它。 試試這個：我只是在沒有 api 調用運行代碼的情況下復制了它。

import React, { useState, useEffect } from "react";

const EditArticle = (props) => {
  const [editValues, setEditValues] = useState([]);
  console.log("values", editValues);
 
  const [authTokens, setAuthTokens] = useState(
    localStorage.getItem("token") || ""
  );

  const setTokens = (data) => {
    localStorage.setItem("token", JSON.stringify(data));
    setAuthTokens(data);
    // setToken(data['dataValues']['token']);
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        //here get the data from api and setstate
        setEditValues({ title: "title", shortDesc: "shortDesc" });
      } catch (err) {}
    };
    fetchData();
  }, []);
  return (
    <div>
      <form value={{ authTokens, setAuthTokens: setTokens }}>
        <input
          value={editValues.title || ""}
          onChange={(input) => setEditValues({title: input.target.value})}
          type="text"
        />
        <input
          value={editValues.shortDesc}
          onChange={(input) => setEditValues({shortDesc: input.target.value})}

          type="text"
        />
        <button type="submit">send</button>
      </form>
    </div>
  );
};
export default EditArticle;

Answer 2

您的 onChange 處理程序正在更新與輸入value不同的 state 屬性（editValues 與 changedValues）。

您也可以將defaultValue傳遞給僅用作默認值的input 。

在此處查看更多信息https://reactjs.org/docs/uncontrolled-components.html