Question

我被困在更新状态上以应对多个输入。状态是这样的

// register the decorator (using hooks, because it's 2020)
React.useEffect(() => {
  // create the decorator
  const myDecorator = new CompositeDecorator([{
    strategy: findEntities,
    component: RenderEntity,
  }]);
  // update the editor state
  setEditorState((state) => EditorState.set(state, { decorator: myDecorator }));
},
// only once
[]);

我具有此功能来处理多个输入并更新状态

const [state, setState] = useState({
        documents: [
            {
                nom: 'mamy',
                contact: '1234567890',
                numAudit: 'XXX/1234',
                email: 'mamy@gmail.com',
            },
            {
                nom: 'tsiry',
                contact: '5555237890',
                numAudit: 'XXX/1235',
                email: 'tsiry@gmail.com',
            },
            {
                nom: 'fenohasina',
                contact: '1234123890',
                numAudit: 'XXX/1236',
                email: 'fenohasina@gmail.com',
            },
        ],
    });

但是它并没有让应该在文档中插入对象，而是为每个输入字段创建了一个字段。

这里是此功能更新的状态，看起来不好

const handleChange = (e) => {
        const value = e.target.value
        //const newDoc = [...documents, { [e.target.name]: value }]
        //documents = newDoc
        setStateValue({
            ...stateValue,
            documents: { ...stateValue.documents, [e.target.name]: value }
        })

    }

这是我期望得到的状态

{
        documents: [
            {
                nom: 'fenohasina',
                contact: '1234123890',
                numAudit: 'XXX/1236',
                email: 'fenohasina@gmail.com',
            },
            nom:'new value',
            contact:'new value',
            numAudit:'new value',
            email:'new value',
        ],
    }

如果您可以使用handleChange函数帮助我，将挽救我的生命。谢谢

Answer 1

您的函数看起来不错，并且输出符合预期，因为它不知道必须更新数组中的哪个对象。我可以看到两种可能的解决方案：

如果要添加整个新对象，则必须将所有新值收集到新对象中，直到完成。完成后，使用包含内部所有字段的新对象更新状态。
或者，如果您想像现在一样一一添加字段，则可以使用一个函数，该函数可以找到状态内要更新的对象。换句话说，您应该拥有一个ID或电子邮件，以在您的州内找到适当的对象，然后更新适当的字段。

Answer 2

您的实现看起来不完全正确。将数据添加到Private Sub Workbook_Open() Call calc End Sub数组应该在单击按钮时完成，而不是在handleChange上完成

在此处查看以下示例：https://codesandbox.io/s/nice-moore-e3ny0?file=/src/App.js

documents

Answer 3

检查一下，我已经为您实现了，您需要将所有输入值存储到单独的对象中，然后通过诸如单击按钮之类的操作将新文档与所有先前文档合并。 Codesandbox：https://codesandbox.io/s/confident-pascal-lcejd?file=/src/App.js

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [values, setValues] = useState({
    nom: "",
    contact: "",
    numAudit: "",
    email: ""
  });
  const [state, setState] = useState({
    documents: [
      {
        nom: "mamy",
        contact: "1234567890",
        numAudit: "XXX/1234",
        email: "mamy@gmail.com"
      },
      {
        nom: "tsiry",
        contact: "5555237890",
        numAudit: "XXX/1235",
        email: "tsiry@gmail.com"
      },
      {
        nom: "fenohasina",
        contact: "1234123890",
        numAudit: "XXX/1236",
        email: "fenohasina@gmail.com"
      }
    ]
  });

  const onChangeFunc = e => {
    const newValues = { ...values, [e.target.name]: e.target.value };
    setValues(newValues);
  };

  const onAdd = () => {
    setState({ documents: [...state.documents, values] });
  };

  //just to display updated state
  useEffect(() => {
    console.log("state now", state);
  }, [state]);

  return (
    <div className="App">
      <input
        type="text"
        name="nom"
        placeholder="nom"
        value={values["nom"]}
        onChange={onChangeFunc}
      />
      <br />
      <input
        type="text"
        name="contact"
        placeholder="contact"
        value={values["contact"]}
        onChange={onChangeFunc}
      />
      <br />
      <input
        type="text"
        name="numAudit"
        placeholder="numAudit"
        value={values["numAudit"]}
        onChange={onChangeFunc}
      />
      <br />
      <input
        type="text"
        name="email"
        placeholder="email"
        value={values["email"]}
        onChange={onChangeFunc}
      />
      <br />
      <button onClick={onAdd}>Add New</button>
    </div>
  );
}

使用多个输入更新状态

3 个答案: