Question 285936 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to restrict antd onValuesChange to only one field

I am trying to get the value on input phone when the user types in the value on the input field. I used onValuesChange but I found out that this it affects other fields as well

If I type on username field it called the getAccountName function. which is not my expectation.

My expectation is that getAccountName function should only be called when someone types on the phone input

const Register = () => {

    const [form] = Form.useForm();
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const [errors, setErrors] = useState([]);
    const [accountName, setAccountName] = useState("");
    const [searchAccountName, setSearchAccountName] = useState("");
    const [phone, setPhone] = useState("");

This is the function I want to call when the user types on the phone number input

    const getAccountName = async (changedValues) => {
        const formFieldName = Object.keys(changedValues)[0];
        setErrors('');
        setSearchAccountName(true)
        try {

            const res = await UserServices.getAccount(changedValues[formFieldName])
            setAccountName(res.data.data.name)
            setSearchAccountName(false)

            // navigate("/")
        } catch (error) {
            setSearchAccountName(false)
            if (error.response) {
                setErrors(error.response.data.data);
            } else if (error.request) {
                setSearchAccountName(false)
                console.log(error.request);
            } else {
                setSearchAccountName(false)
                console.log('Error', error.message);
            }
        }
    }
    return (
        <div>
            <div className="mt-5">
                <div className="container">
                    <div className="row">
                        <div className="col-md-4 offset-md-3">
                        </div>
                        <div className="col-5">
                            <Card>
                                {errors && (<div className="alert alert-danger">{errors}</div>)}
                                <h3 className='mb-4'>Register</h3>

                                <Form
                                    form={form}
                                    layout="vertical"
                                    onFinish={onFinish}
                                    onValuesChange={getAccountName}
                                >

                                    <Form.Item label="Phone" required name="phone"
                                        rules={[
                                            {
                                                required: true,
                                                message: 'Phone is Required',
                                            }]
                                        }>
                                        <Input placeholder="Phone Number" />
                                    </Form.Item>
                                    {searchAccountName && "loading Account Name"}
                                    {accountName && (<div className="alert alert-success mt-2">{accountName}</div>)}

                                    <Form.Item>
                                        <Button htmlType="submit" type="primary">Register</Button>
                                    </Form.Item>
                                </Form>

                                <div>Do you have an account? <Link to='/'>Click here</Link> </div>

                            </Card>
                        </div>
                    </div>

                </div>
            </div>
        </div >
    )
}

export default Register
Tags:

2

Answers


  1. 0

    If you want the getAccountName function to be called only when the "phone" input field is changed, you can add a conditional check within the onValuesChange callback to ensure that the function is only triggered when the changed field is "phone."

    // ...

const getAccountName = async (changedValues) => {
    const formFieldName = Object.keys(changedValues)[0];
    
    // Check if the changed field is "phone" before proceeding
    if (formFieldName === "phone") {
        setErrors('');
        setSearchAccountName(true);

        try {
            const res = await UserServices.getAccount(changedValues[formFieldName]);
            setAccountName(res.data.data.name);
            setSearchAccountName(false);
        } catch (error) {
            setSearchAccountName(false);
            if (error.response) {
                setErrors(error.response.data.data);
            } else if (error.request) {
                console.log(error.request);
            } else {
                console.log('Error', error.message);
            }
        }
    }
}

// ...

<Form
    form={form}
    layout="vertical"
    onFinish={onFinish}
    onValuesChange={getAccountName}
>
    {/* ... */}
</Form>

// ...
    Login or Signup to reply.
  2. 0

    By applying this condition, the function checks if the changed field is the "phone" field before executing the logic.

    if (formFieldName === 'phone') {
    setErrors('');
    setSearchAccountName(true);

try {
    const res = await UserServices.getAccount(changedValues[formFieldName]);
    setAccountName(res.data.data.name);
    setSearchAccountName(false);
} catch (error) {
    setSearchAccountName(false);
    if (error.response) {
        setErrors(error.response.data.data);
    } else if (error.request) {
        console.log(error.request);
    } else {
        console.log('Error', error.message);
    }
}

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search