useState 不更新输入字段？

Question

目标是什么？

我有两个输入和四个单选按钮。如果您选择每个单选按钮值，它将被添加到输入中。

我的问题是什么？

当我选择每个单选按钮时，输入没有更新。

我的示例使用什么？

我同时使用 useState 和 useRef，因为我知道 useRef 不会更新组件而 useState 会。

这个例子有什么奇怪的？

当我声明一个计数变量并在它们更新的每个输入字段上方添加 console.log(count + 1) 时。

最后一个问题。 为什么我的输入字段是由 console.log(count + 1) 而不是 useState 更新的？

CodeSandBox

import React, { useState, useRef } from "react";
import { Row, Col, Form, Input, InputNumber, Radio } from "antd";
import "./styles.css";

export default function App() {
  const marketCapButtonValue = useRef();
  const marketCapButtonValue1BTo10B = useRef();
  const marketCapButtonValue100MTo1B = useRef();
  const marketCapButtonValue10MTo100M = useRef();

  const [marketCapFrom, setMarketCapFrom] = useState(0);
  const [marketCapTo, setMarketCapTo] = useState(0);
  let count = 0;
  const [form] = Form.useForm();

  function radioButtonValueHandler(e) {
    console.log("value choosed : ", e.target.defaultValue);
    if (e.target.defaultValue === "10B") {
      marketCapValueHandler(marketCapButtonValue.current.props.value);
    } else if (e.target.defaultValue === "1B - 10B") {
      marketCapValueHandler(marketCapButtonValue1BTo10B.current.props.value);
    } else if (e.target.defaultValue === "100M - 1B") {
      marketCapValueHandler(marketCapButtonValue100MTo1B.current.props.value);
    } else if (e.target.defaultValue === "10M - 100M") {
      marketCapValueHandler(marketCapButtonValue10MTo100M.current.props.value);
    }
  }
  const marketCapValueHandler = (value) => {
    if (value === "10B") {
      setMarketCapFrom(10000000000);
      setMarketCapTo(0);
    } else if (value === "1B - 10B") {
      setMarketCapFrom(1000000000);
      setMarketCapTo(10000000000);
    } else if (value === "100M - 1B") {
      console.log("100M - 1B");
      setMarketCapFrom(100000000);
      setMarketCapTo(1000000000);
    } else if (value === "10M - 100M") {
      console.log("10M - 100M");
      setMarketCapFrom(10000000);
      setMarketCapTo(100000000);
    }
  };
 

  return (

    <div className="App">
      <Form form={form} layout="vertical" name="userForm">
        <Input.Group size="large">
          <Row gutter={8}>
            <Col>
              <Form.Item
                name="marketCapFrom"
                rules={[
                  {
                    required: true,
                    message: "Please input right number."
                  },
                  ({ getFieldValue }) => ({
                    validator(_, value) {
                      if (getFieldValue("marketCapFrom") > 0) {
                        return Promise.resolve();
                      } else if (
                        getFieldValue("marketCapFrom") < 0 ||
                        getFieldValue("marketCapFrom") === null
                      ) {
                        return Promise.reject(
                          new Error("Not null or negative value.")
                        );
                      }
                    }
                  })
                ]}
              >
          {console.log(count + 1)}
               
                <InputNumber
                  size="large"
                  style={{ width: "200px" }}
                  defaultValue={marketCapFrom}
                  value={marketCapFrom}
                  name="marketCapFrom"
                  formatter={(value) =>
                    `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
                  }
                  parser={(value) => value.replace(/$\s?|(,*)/g, "")}
                />
              </Form.Item>
            </Col>
            <Col span={2} style={{ textAlign: "center", lineHeight: "2.5" }}>
              <span>To</span>
            </Col>
            <Col>
              <Form.Item
                name="marketCapTo"
                rules={[
                  {
                    required: true,
                    message: "Please input right number."
                  },
                  ({ getFieldValue }) => ({
                    validator(_, value) {
                      if (getFieldValue("marketCapTo") > 0) {
                        return Promise.resolve();
                      } else if (
                        getFieldValue("marketCapTo") < 0 ||
                        getFieldValue("marketCapTo") === null
                      ) {
                        return Promise.reject(
                          new Error("Not null or negative value.")
                        );
                      }
                    }
                  })
                ]}
              >
          {console.log(count + 1)}

                <InputNumber
                  size="large"
                  style={{ width: "200px" }}
                  name="marketCapToo"
                  value={marketCapTo}
                  defaultValue={marketCapTo}
                  formatter={(value) =>
                    `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
                  }
                  parser={(value) => value.replace(/$\s?|(,*)/g, "")}
                />
              </Form.Item>
            </Col>
          </Row>
          <br />

          <Row>
            <Radio.Group defaultValue="10B" buttonStyle="solid" size="large">
              <Radio.Button
                value="10B"
                ref={marketCapButtonValue}
                onClick={radioButtonValueHandler}
              >
                {">"}B
              </Radio.Button>
              <Radio.Button
                onClick={radioButtonValueHandler}
                value="1B - 10B"
                ref={marketCapButtonValue1BTo10B}
              >
                B - B
              </Radio.Button>
              <Radio.Button
                onClick={radioButtonValueHandler}
                ref={marketCapButtonValue100MTo1B}
                value="100M - 1B"
                defaultValue="100M - 1B"
              >
                0M - B
              </Radio.Button>
              <Radio.Button
                onClick={radioButtonValueHandler}
                ref={marketCapButtonValue10MTo100M}
                value="10M - 100M"
                defaultValue="10M - 100M"
              >
                M - 0M
              </Radio.Button>
            </Radio.Group>
          </Row>
        </Input.Group>
      </Form>
    </div>
  );
}

Answer 1

如果您使用的是 antd 表单，请更新表单实例中的输入值而不是每个输入的值，否则您可以使用一些没有任何 antd 表单的输入：

updated codesandbox

  const marketCapValueHandler = (value) => {
    if (value === "10B") {
      form.setFieldsValue({marketCapFrom:10000000000, marketCapTo:0 })
    } else if (value === "1B - 10B") {
      form.setFieldsValue({marketCapFrom:1000000000, marketCapTo:10000000000 })
    } else if (value === "100M - 1B") {
      form.setFieldsValue({marketCapFrom:100000000, marketCapTo:1000000000 })
    } else if (value === "10M - 100M") {
      form.setFieldsValue({marketCapFrom:10000000, marketCapTo:100000000 })
    }
  };

useState 不更新输入字段？

Input fields are not updated by useState?

javascript

reactjs

antd

react-hooks