국가 코드 API를 가져 와서 선택 필드에 옵션으로 저장합니다. 사용자가 국가를 선택할 수있는 하나의 선택 필드가 있고 다른 입력 상자에 국가 전화 코드가 자동으로 표시됩니다.
입력 상자에서 국가 값을 선택하려고하는데 handleSelectCountry가 국가를 선택하고 handleInputChange가 국가 코드를 대상으로하고 값이 자동으로 선택됩니다.
어떻게 할 수 있습니까?
componentDidMount() {
fetch("https://restcountries.eu/rest/v2/all")
.then((res) => res.json())
.then((result) => {
console.log(result);
console.warn(result);
this.setState({ countries: result });
console.log("i am in console");
});
}
state ={
name:''
}
handleSelectCountry= (event) =>{
console.log(event.target.value);
const myCountry = (event.target.value);
this.setState = ({value: event.target.value});
const selectedCountry = event.target.value;
}
handleInputChange = (event) =>{
console.log(event.target.value);
const myCountryCode = event.target.value;
this.setState = ({value: event.target.value});
}
render (){
return (
<div>
<div className="row col-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div className="col-md-6 col-lg-6 ">
<div className="input-group Form-main">
<select onChange={this.handleCountrySelectChange}>
{this.state.countries.map(country => (
<option key={country.name} value={country.name}>
{country.name}
</option>
))}
</select>
</div>
</div>
</div>
<br />
<div className="row col-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div className="col-md-6 col-lg-6 ">
<div className="input-group Form-main">
<input type="text"
placeholder = " Auto Select"
required="required"
onChange={this.handleInputChange}/>
</div>
</div>
</div>
{/* ----Form ends */}
</div>
);
}
}
countries초기 상태 에 추가 해야합니다.
state = {
name: '',
countries: [],
}
대신에
this.setState = ({value: event.target.value});
setState 메소드를 호출하고 키 value를name
this.setState({ name: event.target.value });
onChange 다음과 같아야한다
<select onChange={event => this.handleSelectCountry(event)}>
그리고 value입력 에 매개 변수를 추가 하십시오.
<input type="text"
placeholder=" Auto Select"
required="required"
onChange={event => this.handleInputChange(event)}
value={this.state.name}
/>
최종 결과:
componentDidMount() {
fetch("https://restcountries.eu/rest/v2/all")
.then((res) => res.json())
.then((result) => {
console.log(result);
console.warn(result);
this.setState({ countries: result });
console.log("i am in console");
});
}
state = {
name: '',
countries: [],
}
handleSelectCountry = (event) => {
console.log(event.target.value);
const myCountry = (event.target.value);
this.setState({ name: event.target.value });
const selectedCountry = event.target.value;
}
handleInputChange = (event) => {
console.log(event.target.value);
const myCountryCode = event.target.value;
this.setState({ name: event.target.value });
}
render() {
return (
<div>
<div className="row col-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div className="col-md-6 col-lg-6 ">
<div className="input-group Form-main">
<select onChange={event => this.handleSelectCountry(event)}>
{this.state.countries.map(country => (
<option key={country.name} value={country.name}>
{country.name}
</option>
))}
</select>
</div>
</div>
</div>
<br />
<div className="row col-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div className="col-md-6 col-lg-6 ">
<div className="input-group Form-main">
<input type="text"
placeholder=" Auto Select"
required="required"
onChange={event => this.handleInputChange(event)}
value={this.state.name}
/>
</div>
</div>
</div>
{/* ----Form ends */}
</div>
);
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다