Javascript 在react js中更改不同组件内的值

我在react js中有一个表单，用户可以在其中添加值

const Demo=（）=>{
const[date，setDate]=useState（“”）；
const onFinish=值=>{
log（“接收到的值的形式：”，值）；
};
const changeDate=v=>{
console.log（矩（v）.format（“HH”）；
设定日期（时刻（v）.格式（“HH”）；
};
返回(
{（字段，{add，remove}）=>{
返回(
{fields.map（field=>(
{date}

{
删除（字段名称）；
}}
/>
))}
{
添加（）；
}}
块
>
添加字段
);
}}
提交

试试这个，我已经添加了关于更改：codeSandBox:

import React，{useState}来自“React”；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“antd”导入{Form，Input，Button，Space}；
从“@ant design/icons”导入{MinusCircleOutlined，PlusOutlined}”；
从“antd”导入{TimePicker}；
从“时刻”中导入时刻；
const format=“HH:mm”；
常量演示=（）=>{
const[date，setDate]=useState（{}）；//使用日期对象存储每个键的每个字段值
const onFinish=值=>{
日志（“收到的值的形式：”，值，日期）；
};
constchangedate=（momentDate、dateString、key）=>{
log（momentDate、dateString、key）；
setDate（{…日期，[键]：dateString}）；
};
返回(
{（字段，{add，remove}）=>{
返回(
{fields.map（field=>(
changeDate（date，dateString，field.key）//这里传递要存储的日期和键
}
/>
{date[field.key]}

{
删除（字段名称）；
}}
/>
))}
{
添加（）；
}}
块
>
添加字段
);
}}
提交
);
};
render（，document.getElementById（“容器”）；

试试这个，我已经添加了关于更改：codeSandBox:

import React，{useState}来自“React”；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“antd”导入{Form，Input，Button，Space}；
从“@ant design/icons”导入{MinusCircleOutlined，PlusOutlined}”；
从“antd”导入{TimePicker}；
从“时刻”中导入时刻；
const format=“HH:mm”；
常量演示=（）=>{
const[date，setDate]=useState（{}）；//使用日期对象存储每个键的每个字段值
const onFinish=值=>{
日志（“收到的值的形式：”，值，日期）；
};
constchangedate=（momentDate、dateString、key）=>{
log（momentDate、dateString、key）；
setDate（{…日期，[键]：dateString}）；
};
返回(
{（字段，{add，remove}）=>{
返回(
{fields.map（field=>(
changeDate（date，dateString，field.key）//这里传递要存储的日期和键
}
/>
{date[field.key]}

{
删除（字段名称）；
}}
/>
))}
{
添加（）；
}}
块
>
添加字段
);
}}
提交
);
};
render（，document.getElementById（“容器”）；

您似乎在所有日期选择器中更改了一个状态变量。假设所有日期选择器都需要单独的值，那么您应该有一个日期数组，而不是一个值。您可以签出作为引用。@YevgenGorbunkov，请在这里输入一个lok，文本现在正在更改ok，但当我尝试更改一个或另一个文本，该文本仍与以前一样。我如何解决此问题？您似乎在所有日期选择器中更改了一个状态变量。假设，您需要为所有这些变量使用单独的值，您应该具有一个日期数组，而不是单个值。您可以作为引用签出。@YevgenGorbunkov，你能不能在这里打个比方，现在的课文正在变好，但是当我试图改变一个课文或另一个课文时，课文还是和以前一样。我怎么解决这个问题呢？请你看一下这里。我试图用你的答案来计算时差，但当我计算时

    import React, { useState } from "react";
    import ReactDOM from "react-dom";
    import "antd/dist/antd.css";
    import "./index.css";
    import { Form, Input, Button, Space } from "antd";
    import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
    import { TimePicker } from "antd";
    import moment from "moment";
    
    const format = "HH:mm";
    const Demo = () => {
      const [date, setDate] = useState({}); //use a date object to store every field value against every key

      const onFinish = values => {
        console.log("Received values of form:", values, date);
      };
    
      const changeDate = (momentDate, dateString, key) => {
        console.log(momentDate, dateString, key);
        setDate({ ...date, [key]: dateString });
      };
    
      return (
        <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
          <Form.List name="users">
            {(fields, { add, remove }) => {
              return (
                <div>
                  {fields.map(field => (
                    <Space
                      key={field.key}
                      style={{ display: "flex", marginBottom: 8 }}
                      align="start"
                    >
                      <Form.Item
                        {...field}
                        name={[field.name, "first"]}
                        fieldKey={[field.fieldKey, "first"]}
                        rules={[{ required: true, message: "Missing first name" }]}
                      >
                        <Input placeholder="First Name" />
                      </Form.Item>
    
                      <TimePicker
                        defaultValue={moment("12:08", format)}
                        format={format}
                        onChange={(date, dateString) =>
                          changeDate(date, dateString, field.key) //here passing date & key to store
                        }
                      />
                      <p>{date[field.key]}</p>
                      <MinusCircleOutlined
                        onClick={() => {
                          remove(field.name);
                        }}
                      />
                    </Space>
                  ))}
    
                  <Form.Item>
                    <Button
                      type="dashed"
                      onClick={() => {
                        add();
                      }}
                      block
                    >
                      <PlusOutlined /> Add field
                    </Button>
                  </Form.Item>
                </div>
              );
            }}
          </Form.List>
    
          <Form.Item>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      );
    };
    
    ReactDOM.render(<Demo />, document.getElementById("container"));