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