// props = route props, ref = route ref
const SignupComponent = React.forwardRef((props, ref) => {
// ... magic ...
return (
<form onSubmit={handleSubmit} ref={ref}>
...
</form>
)
})
interface listProps {
tag: React.ComponentType;
}
case 'DELETE_ITEM'
return state.filter(item => item.name !== action.name);
class Rate extends React.Component {
constructor(props) {
super(props);
this.state = {
date: '',
currencyRat: {},
}
this.currency = ['USD', 'RUB', 'CAD'];
}
componentDidMount() {
this.getRate(); // не в конструкторе надо вызывать, а в componentDidMount
}
getRate() {
fetch('https://api.exchangeratesapi.io/latest')
.then(data => {
return data.json(); // забыли вызвать функцию
})
.then(data => {
console.log(data)
this.setState({ date: data.date })
})
}
"env": {
"jest": true
}
"env": {
"jest/globals": true
}
import React from "react";
import "./TodoItem.css";
const Mode = {
VIEW: "VIEW",
EDIT: "EDIT"
};
export const TodoItem = ({ index, item, updateItem, removeItem }) => {
const [mode, setMode] = React.useState(Mode.VIEW);
const [input, setInput] = React.useState(item.text);
const inputRef = React.useRef();
React.useEffect(() => {
if (mode === Mode.EDIT) {
inputRef.current.focus();
}
}, [mode]);
const handleInput = event => {
setInput(event.target.value);
};
const saveItem = () => {
updateItem(index, input);
setMode(Mode.VIEW);
};
const handleToggleMode = () => {
setMode(prevMode => (prevMode === Mode.VIEW ? Mode.EDIT : Mode.VIEW));
};
const handleRemove = () => {
removeItem(index);
};
return (
<div className="todo-item">
<div className="todo-item__data">
{mode === Mode.VIEW && (
<div className="todo-item__value">{item.text}</div>
)}
{mode === Mode.EDIT && (
<div className="todo-item__form">
<input
type="text"
value={input}
onChange={handleInput}
ref={inputRef}
/>
<button type="button" onClick={saveItem}>
Save
</button>
</div>
)}
</div>
<div className="todo-item__meta">
<div className="todo-item__controls">
<button type="button" onClick={handleToggleMode}>
Edit
</button>
<button type="button" onClick={handleRemove}>
Remove
</button>
</div>
<div className="todo-item__time">{item.time.toLocaleString()}</div>
</div>
</div>
);
};
Пишут, что connect более производительная штука, а useSelector чаще будет рендирить, так ли это?