如何在 react.js 中添加编辑按钮和功能答案

【问题标题】：How to add edit button and function in react.js如何在 react.js 中添加编辑按钮和功能
【发布时间】：2021-05-21 11:29:24
【问题描述】：

我想分享这个问题。所以，我有一个由 react-bootstrap 设计的表单。并且还使用 React Hooks 和 React Function Component。我有一个表格，它是添加新表格和删除表格，但我不编辑表格。这是一个返回语句

return(
        <Container>
            <Row>
                <Col>
                <Form onSubmit={handleSubmit}>
                    <Form.Group>
                        <Form.Label>Name</Form.Label>
                        <Form.Control ref = {firstname} type="text" placeholder="Name.." />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Surname</Form.Label>
                        <Form.Control ref = {secondname} type="text" placeholder="Surname.." />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Email address</Form.Label>
                        <Form.Control ref = {email} type="email" placeholder="E-Mail" />
                        <Form.Text> Please, Enter like "asd@asd.com"</Form.Text>
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Comment</Form.Label>
                        <Form.Control ref = {comment} as="textarea" rows={3} placeholder = "Notes :)"/>
                    </Form.Group>
                    <Button className = "btn-lg" onClick={handleSubmit} variant="success" type="submit">Submit</Button>
                </Form>
                </Col>
            </Row>
            
            {Formss}
        </Container>
    )

然后，这些就是这个返回的功能

const Formss = input.map((item , index) =>
        {
            return(
                <Lists key = {index} item = {item} index = {index} deleteFunc={handleDelete}/>
            )
        }
    )

const handleSubmit = (event) => {
        event.preventDefault();

        const name = firstname.current.value
        const surname = secondname.current.value
        const mail = email.current.value
        const mycomment = comment.current.value

        const data = {id:id(),
                    name : name,
                    surname : surname,
                    mail : mail,
                    mycomment : mycomment}
    
        if(data.name && data.surname && data.mail && data.mycomment){
            setInput([...input, data])
            firstname.current.value = ""
            secondname.current.value = ""
            email.current.value = ""
            comment.current.value =""
        }else{
            console.log("oopss")
        }
    }

我使用 ref 钩子来处理提交。那么，如何添加编辑按钮和编辑功能呢？

【问题讨论】：

所以你的问题是你需要能够编辑字段？
我想输入数据操作，例如输入一些电子邮件姓名姓然后我想更改这些信息

标签： reactjs react-hooks

【解决方案1】：

为了能够编辑数据并将其保存为状态，您可以按照提供的示例进行操作。然后在handleSubmit 函数中你可以进一步处理你的数据：

import React from "react";
import { Container, Row, Col, Form, Button } from "react-bootstrap";

const App = () => {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(state);
  };

  const initialState = {
    firstname: "",
    secondname: "",
    email: "",
    comment: "",
  };

  const [state, setState] = React.useState(initialState);

  const handleChange = ({ target: { value, name } }) => {
    setState({ ...state, [name]: value });
  };

  return (
    <Container>
      <Row>
        <Col>
          <Form onSubmit={handleSubmit}>
            <Form.Group>
              <Form.Label>Name</Form.Label>
              <Form.Control
                name="firstname"
                value={state.firstname}
                type="text"
                placeholder="Name.."
                onChange={handleChange}
              />
            </Form.Group>
            <Form.Group>
              <Form.Label>Surname</Form.Label>
              <Form.Control
                name="secondname"
                value={state.secondname}
                type="text"
                placeholder="Surname.."
                onChange={handleChange}
              />
            </Form.Group>
            <Form.Group>
              <Form.Label>Email address</Form.Label>
              <Form.Control
                value={state.email}
                name="email"
                type="email"
                placeholder="E-Mail"
                onChange={handleChange}
              />
              <Form.Text> Please, Enter like "asd@asd.com"</Form.Text>
            </Form.Group>
            <Form.Group>
              <Form.Label>Comment</Form.Label>
              <Form.Control
                name="comment"
                value={state.comment}
                as="textarea"
                rows={3}
                placeholder="Notes :)"
                onChange={handleChange}
              />
            </Form.Group>
            <Button className="btn-lg" variant="success" type="submit">
              Submit
            </Button>
          </Form>
        </Col>
      </Row>
    </Container>
  );
};

export default App;

【讨论】：