feat(select): extend drop-down component
This commit is contained in:
parent
b9ba70cac5
commit
63caa9342d
|
@ -1,21 +1,27 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
/*controlled component: input form value controlled by React*/
|
||||||
const DropDownSelect = (props) => {
|
const DropDownSelect = (props) => {
|
||||||
if(props.options){
|
/*destructuring*/
|
||||||
console.log('options len: '+props.options.length);
|
const {options,name,onChange}=props;
|
||||||
|
if(options){
|
||||||
|
console.log('options len: '+options.length);
|
||||||
return(
|
return(
|
||||||
<div>
|
<div>
|
||||||
<strong>{props.name}</strong>:
|
<strong>{name}</strong>:
|
||||||
<select
|
<select
|
||||||
name="{props.name}"
|
name={name}
|
||||||
onChange={props.onChange}
|
id={name}
|
||||||
|
className={name}
|
||||||
|
onChange={onChange}
|
||||||
|
autoFocus
|
||||||
>
|
>
|
||||||
<option defaultValue
|
<option defaultValue
|
||||||
>
|
>
|
||||||
Select {props.name}
|
Select {name}
|
||||||
</option>
|
</option>
|
||||||
{props.options.map((item, index) => (
|
{options.map((item, index) => (
|
||||||
<option key={index} value={item.id}>
|
<option key={index} value={item.id}>
|
||||||
{item.name}
|
{item.name}
|
||||||
</option>
|
</option>
|
||||||
|
@ -36,5 +42,6 @@ export default DropDownSelect
|
||||||
|
|
||||||
DropDownSelect.propTypes = {
|
DropDownSelect.propTypes = {
|
||||||
name: PropTypes.string,
|
name: PropTypes.string,
|
||||||
|
onChange: PropTypes.func,
|
||||||
options: PropTypes.array,
|
options: PropTypes.array,
|
||||||
};
|
};
|
||||||
|
|
|
@ -18,7 +18,16 @@ const Home = () => {
|
||||||
console.log('err.message: ' + err.message);
|
console.log('err.message: ' + err.message);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
const handleChange = (e) => {
|
||||||
|
console.log('prev chosenValue: '+chosenValue);
|
||||||
|
console.log('e.target.id: '+e.target.id);
|
||||||
|
console.log('e.target.type: '+e.target.type);
|
||||||
|
console.log('e.target.className: '+e.target.className);
|
||||||
|
console.log('e.target.tagName: '+e.target.tagName);
|
||||||
|
console.log('e.target.name: '+e.target.name);
|
||||||
|
console.log('e.target.value: '+e.target.value);
|
||||||
|
setChosenValue(e.target.value);
|
||||||
|
};
|
||||||
/*this hook is run after a DOM update. Changing state migh result in an infinite loop*/
|
/*this hook is run after a DOM update. Changing state migh result in an infinite loop*/
|
||||||
/*hook need to be placed in body of the function component in which it is used*/
|
/*hook need to be placed in body of the function component in which it is used*/
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -30,7 +39,11 @@ const Home = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DropDownSelect name="University" options={list}/>
|
<DropDownSelect
|
||||||
|
name="Name"
|
||||||
|
onChange={handleChange}
|
||||||
|
options={list}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue