#reactjs #antd
Вопрос:
У меня есть Страна, штат и город . впервые я выбрал страну, штат и город. Когда я меняю другую страну, я ожидаю , что отобразится значение по умолчанию, например, выберите штат, выберите город. после повторного выбора страны мне нужно выбрать другой штат и город в разделе «Измененная страна». Пожалуйста, помогите мне отобразить значение по умолчанию для штата и города после изменения страны.
шаг 1) выберите страну
шаг 2) выберите состояние
шаг 3) выберите город
шаг 4) измените страну 
шаг 5) ожидание после изменения страны ожидание штата и города должно измениться на значение по умолчанию(—выберите Штат—) (—Выберите город —)
актуально:- Он отображает значение штата и города.
мой код : —
import React, { useState, useEffect } from "react";
import { useDispatch,useSelector } from "react-redux";
import { Button, Form, message, Select, Row, Col, Alert} from 'antd';
import { DeleteOutlined } from "@ant-design/icons";
import { Country, State, City } from 'country-state-city';
import { SetStudentInfo } from "../../../../../redux/reducer/StudentRegister/StudentReg.actions";
const { Option } = Select;
const Countries = Country.getAllCountries()
const States = State.getAllStates()
const Cities = City.getAllCities()
export default (props) => {
const studentInfo = useSelector((state) => state.studentInfo)
const dispatch = useDispatch()
const [form] = Form.useForm()
const [error, setError] = useState("")
const [loading, setLoading] = useState(false)
const [collegesList, setCollegesList] = useState(props.collegesList)
const [collegesSelectedList, setCollegesSelectedList] = useState(studentInfo ? studentInfo.institutesList ? studentInfo.institutesList : [] : [])
const [selectedCountry, setSelectedCountry] = useState(studentInfo ? studentInfo.country : null)
const [selectedState, setSelectedState] = useState(studentInfo ? studentInfo.state : null)
const [selectedCity, setSelectedCity] = useState(studentInfo ? studentInfo.city : null)
const [filteredState, setFilteredState] = useState(States)
const [filteredCity, setFilteredCity] = useState(Cities)
const [warning, setWarning] = useState()
let count = 1
let checkDuplicateSelect = false
const handleSubmit = () => {
let formData = {
country: selectedCountry ? selectedCountry : '',
state: selectedState ? selectedState : '',
city: selectedCity ? selectedCity : '',
institutesList: collegesSelectedList ? collegesSelectedList : []
}
setError("");
setLoading(true)
console.log('formData: ', formData)
dispatch(SetStudentInfo(formData));
props.nextPage(true)
}
const handleRemoveList = (college) => {
setCollegesSelectedList(collegesSelectedList.filter((c) => c !== college))
}
useEffect(() => {
const defaultState = {
name: "--select--"
};
setFilteredState([defaultState,...filteredState])
setFilteredCity([defaultState,...filteredCity])
}, []);
return (
<div className="form-width">
<Form form={form} onFinish={handleSubmit} layout="vertical" className="content">
<h3 style={{textAlign: "center", fontWeight: "lighter"}}>Step 1 of 2</h3>
<Row>
<Col span={11}>
<h3 >I want to go to</h3>
</Col>
<Col span={2}></Col>
<Col span={11}>
<h3 >I want to study at the <br />following universities amp;#38; colleges</h3>
</Col>
</Row>
<Row>
<Col span={11} style={{marginTop: "3%"}}>
<Form.Item
name="cntry"
label="Country"
initialValue={studentInfo ? studentInfo.country : null}
rules={[
{
required: true,
message: "Please choose the country you wanted to go.",
},
]}
>
<Select
showSearch
placeholder="Select country"
loading={loading}
onChange={(code) => {
setSelectedCountry(Countries[code].name)
setFilteredState(States.filter((state) => state.countryCode === Countries[code].isoCode ))
}}
optionFilterProp="children"
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{Object.keys(Countries).map((code) => (
<Option value={code}>{Countries[code].name}</Option>
))}
</Select>
</Form.Item>
<Form.Item
name="prvc"
label="Province"
initialValue={studentInfo ? studentInfo.state ? studentInfo.state : null : null}
>
<Select
showSearch
loading={loading}
placeholder="Select Province"
onChange={(code) => {
setSelectedState(States[code].name)
setFilteredCity(Cities.filter((city) => city.countryCode === filteredState[code].countryCode amp;amp; city.stateCode === filteredState[code].isoCode))
}}
optionFilterProp="children"
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{Object.keys(filteredState).map((state) => (
<Option value={state}>{filteredState[state].name}</Option>
))}
</Select>
</Form.Item>
<Form.Item
name="cty"
label="City"
initialValue={studentInfo ? studentInfo.city ? studentInfo.city : null : null}
>
<Select
showSearch
loading={loading}
placeholder="Select City"
onChange={(code) => {
setSelectedCity(Cities[code].name)
}}
optionFilterProp="children"
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{Object.keys(filteredCity).map((city) => (
<Option value={city}>{filteredCity[city].name}</Option>
))}
</Select>
</Form.Item>
</Col>
<div style={{border: "1px solid #a8f0d9", margin: "2% 2% 2% 2%"}}></div>
<Col span={11} style={{marginTop: "3%"}}>
<Form.Item
name="insts"
label="Type institute name here"
>
<Select
showSearch
loading={loading}
placeholder="Select Colleges"
onChange={(college) => {
checkDuplicateSelect = collegesSelectedList.some(c => c === (collegesList[college].name))
if (!checkDuplicateSelect amp;amp; count <= 10) {
setCollegesSelectedList([...collegesSelectedList, collegesList[college].name])
} else if (!checkDuplicateSelect amp;amp; count > 10) {
setWarning("Max no.of institues[10] list exceeded.")
} else if (checkDuplicateSelect) {
setWarning("Already this institute selected.")
}
}}
optionFilterProp="children"
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{Object.keys(collegesList).map((college) => (
<Option value={college}>{collegesList[college].name}</Option>
))}
</Select>
</Form.Item>
{warning amp;amp; <Alert message={warning} type="warning" showIcon />}
<label>List of institutes selected</label>
<div style={{ border: "1px solid #b3e2d2", height: "19vh", overflowY: "auto" }}>
<Form.Item>
{collegesSelectedList.map((college) => (
<ul style={{listStyleType: "none", padding: "0px"}}>
<li key={college} >
{count }.{college}<Button size="small" onClick={() => handleRemoveList(college)} icon={<DeleteOutlined />} danger />
</li>
</ul>
))
}
</Form.Item>
</div>
</Col>
</Row>
<Form.Item style={{textAlign: "center", marginTop: "2%"}}>
<Button htmlType="submit"
type="primary"
loading={loading}
disabled={loading}>
Next
</Button>
</Form.Item>
</Form>
</div>
)
}
Комментарии:
1. Ваши входы не кажутся контролируемыми входами. Если вы хотите программно установить их значение, то они должны быть полностью управляемыми входными данными. Вы также можете использовать клавишу React для «сброса» входных данных. Похоже, вы не включили полный, воспроизводимый пример кода (я не смог воспроизвести ваш код в запущенном codesandbox). Можете ли вы привести более полный и исчерпывающий пример кода?
Ответ №1:
Я не уверен, что то, что вы хотите сделать, касается только отображения значения по умолчанию, вы можете добавить эту опору в свой выбор. Вы можете сделать что-то вроде этого:
<Select defaultValue="Select state" style={{ width: 120 }}>
<Option value="anycity">anycity</Option>
</Select>
Это всегда сохранит значение по умолчанию, прежде чем выбрать штат или город
Комментарии:
1. Я совершенно уверен, что OP хочет, чтобы входные данные штата и города «сбрасывались» при обновлении значения страны. Другими словами, они хотят вернуться к «исходному значению».
Ответ №2:
API формы initialValues работает только при установке значения путем инициализации или сброса формы, как и Form.Item.
<Form.Item
name="prvc"
label="Province"
initialValue={studentInfo ? studentInfo.state ? studentInfo.state : null : null}
>
если вы измените значение initialValue после инициализации, это не сработает. вы можете использовать FormInstance api form.setFieldsValue({prvc: 'the value you want to set', cty: 'the value you want to set'}) . как показано ниже:
<Form.Item
name="cntry"
label="Country"
initialValue={studentInfo ? studentInfo.country : null}
rules={[
{
required: true,
message: "Please choose the country you wanted to go.",
},
]}
>
<Select
showSearch
placeholder="Select country"
loading={loading}
onChange={(code) => {
// setSelectedCountry(Countries[code].name)
// setFilteredState(States.filter((state) => state.countryCode === Countries[code].isoCode ))
// form is const [form] = Form.useForm()
form.setFieldsValue({
prvc: ...,
cty: ...
})
}}