What’s the goal?
I’ve two inputs and four radio buttons. If you choose each radio button value, it’ll be added to the inputs.
What’s my issue?
The inputs do not update when I choose each radio button.
What I’m using for my example?
I’m using both of useState and useRef because I know useRef doesn’t update components and useState does it.
What’s weird in this example?
When I declare a count variable and I add console.log(count + 1) above each input field they updated.
the last question. Why are my input fields updating by console.log(count + 1) and not by useState?
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}
>
{">"}$10B
</Radio.Button>
<Radio.Button
onClick={radioButtonValueHandler}
value="1B - 10B"
ref={marketCapButtonValue1BTo10B}
>
$1B - $10B
</Radio.Button>
<Radio.Button
onClick={radioButtonValueHandler}
ref={marketCapButtonValue100MTo1B}
value="100M - 1B"
defaultValue="100M - 1B"
>
$100M - $1B
</Radio.Button>
<Radio.Button
onClick={radioButtonValueHandler}
ref={marketCapButtonValue10MTo100M}
value="10M - 100M"
defaultValue="10M - 100M"
>
$10M - $100M
</Radio.Button>
</Radio.Group>
</Row>
</Input.Group>
</Form>
</div>
);
}
>Solution :
If You are using the antd form update the inputs value from the form instance not the value of each input otherwise you can use some input without any antd form:
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 })
}
};