Edit/Update 使用 React 的输入字段

Question

我是 React 新手，在用我的数据库中的对象值预填充它的值后，我正在尝试编辑输入字段，所以如果值是 value={[=16，我应该在 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;

Link 至 CodeSandbox

Edit/Update 使用 React 的输入字段

Edit/Update input field with React

database

forms

edit

fetch

reactjs