尝试更改输入值时出现问题

Question

大家好，我关注code：

    const BasicInformation = () => {
    const { Panel } = Collapse;

    const dataFromBackend = [
    { id: 2, depositeAmt: '500' },
    { id: 3, depositeAmt: '1500' },
    ];

    const totalCount = dataFromBackend
    .map((item) => item.depositeAmt)
    .reduce((prev, curr) => +prev + +curr, 0);

    const onSubmit = (data) => {
    console.log(data);
    };
    return (
    <Form onFinish={(e) => onSubmit(e)}>
      <Form.List name="users" initialValue={dataFromBackend}>
        {(fields, { add }) => {
          return (
            <>
              total Deposit Amount: $ {totalCount}
              <Button
                onClick={() => {
                  add();
                }}
                block
              >
                Add
              </Button>
              {fields.map((field, i) => (
                <Collapse
                  key={i}
                  accordion
                >
                  <Panel header="Amount : ">
                    <Form.Item
                      name={[field.name, 'depositeAmt']}
                      label="Amount"
                      fieldKey={[field.fieldKey, 'depositeAmt']}
                    >
                      <Input />
                    </Form.Item>
                  </Panel>
                </Collapse>
              ))}
            </>
          );
        }}
      </Form.List>
      <Button type="primary" htmlType="submit">
        send
      </Button>
      </Form>
    );
   };

我从后端dataFromBackend 收到一些日期并减少以获取所有存款金额的计数。

我还有deposit 标签。这个想法是当用户更改存款字段值时，total Deposit Amount: 和 <Panel header="Amount : "> 也应该动态更改。

我尝试了这个，但它没有帮助我解决它：

     <Form.Item
       name={[field.name, 'depositeAmt']}
       label="Amount"
       fieldKey={[field.fieldKey, 'depositeAmt']}
       >
        <Input onChange={(e)=>totalCount + e} />
      </Form.Item>

请帮我解决这个问题，非常感谢。

Answer 1

您将dataFromBackend 存储在变量中，这就是问题所在。！您需要将dataFromBackend 存储在状态中，在input (handleInputChange) 更改时您需要更新此数组！

在Add btn 单击时，您需要将新对象推送到dataFromBackend 数组中

显示此代码对您有帮助！

const BasicInformation = () => {
  const { Panel } = Collapse;

  const [dataFromBackend, setDataFromBackend] = useState([
    { id: 2, depositeAmt: '500' },
    { id: 3, depositeAmt: '1500' },
  ]);

  const [totalCount, setTotalCount] = useState(
    dataFromBackend
      .map((item) => item.depositeAmt)
      .reduce((prev, curr) => +prev + +curr, 0)
  );

  const onSubmit = (data) => {
    console.log(data);
  };

  const handleInputChange = (index, value) => {
    let arr = [...dataFromBackend];
    arr[index].depositeAmt = value;
    setDataFromBackend(arr);
  };

  useEffect(() => {
    let count = dataFromBackend
      .map((item) => item.depositeAmt)
      .reduce((prev, curr) => +prev + +curr, 0);

    setTotalCount(count);
  }, [dataFromBackend]);

  const addNewField = () => {
    let id = new Date().getTime();
   setDataFromBackend(oldArray => [...oldArray, { id: id, depositeAmt: 0 }]);
  };

  return (
    <Form onFinish={(e) => onSubmit(e)}>
      <Form.List name="users" initialValue={dataFromBackend}>
        {(fields, { add }) => {
          return (
            <>
              total Deposit Amount: $ {totalCount}
              <Button
                type="dashed"
                onClick={() => {
                  add();
                  addNewField();
                }}
                block
              >
                Add
              </Button>
              {fields.map((field, i) => (
                <Collapse
                  key={i}
                  accordion
                  style={{
                    background: 'rgba(25, 103, 210, 0.08)',
                    border: 'none',
                  }}
                >
                  <Panel style={{ border: 'none' }} header="Amount :">
                    <Form.Item
                      name={[field.name, 'depositeAmt']}
                      label="Amount"
                      fieldKey={[field.fieldKey, 'depositeAmt']}
                    >
                      <Input
                        type="number"
                        onChange={(e) => handleInputChange(i, e.target.value)}
                      />
                    </Form.Item>
                  </Panel>
                </Collapse>
              ))}
            </>
          );
        }}
      </Form.List>
      <Button type="primary" htmlType="submit">
        send
      </Button>
    </Form>
  );
};

ReactDOM.render(<BasicInformation />, document.getElementById('container'));