如何在输入 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 的状态属性不同的状态属性（editValues 与 changedValues）。

您还可以将defaultValue 传递给input，这将仅用作默认值。

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