使用 React 编辑/更新输入字段

Question

我是新来的反应，我在用数据库中的对象值预填充输入字段的值后尝试编辑输入字段，那么如果值是 value={data.info}，我应该在 onChange 上添加什么？因为我无法输入或更改初始值。我看过很多教程，但是这个。和道具让我很困惑

import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import useAsync from '../useAsync';

export default function Details() {
  const url = 'https://..';
  const { index } = useParams();
  const { data } = useAsync(url + index);
  const [state, setState] = useState(false);



const showForm = () => {
    return (
        <div>
            <form>
                <input type="text" value={data.info} onChange={} />
            </form>
        </div>
    )
}


return (
    <div className="details" >
        {data && <p key={index}>{data.info}</p>}
        <button onClick={() => setState({ showForm: true })}>Edit</button>
        {state.showForm ? showForm() : null}
    </div>
)

}

Answer 1

您可以将“默认值”添加到您的状态。所以你可以将data 值移动到你的useState(false) 所以useState(data)

import React, { useState } from "react";

const App = () => {
  const [formInput, setFormInput] = useState(""); // You can add your "data" as default value

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>formInput Value {formInput}</h2>
      <input
        type="text"
        value={formInput}
        onChange={(e) => setFormInput(e.target.value)} // You need to set the state with the onchange value from the input
      />
    </div>
  );
};

export default App;

链接到CodeSandbox