php -r "phpinfo()" > phpinfoするThreadで検索、Thread SafeかUnSafeか調べるphp\extに配置php.iniのDynamic Extensionsセクションに次のような感じで記述# php_と.dllは勝手に補完される
extension=pdo_sqlsrv_74_ts_x64
extension=sqlsrv_74_ts_x64
php -r "phpinfo()" > phpinfoしてsqlsrvが確認できたらOKTSの情報に乏しく無駄にハマったのでメモ程度に
| Env | Ver |
|---|---|
| React | 17.0.1 |
| TypeScript | 4.1.3 |
<input />をラップしたコンポーネントのフォーカスを変更するためにrefを使いますChild.tsximport { forwardRef } from 'react';
export type ChildProps = {
type: 'text' | 'password' | 'number';
onChange(changeValue: string): void;
};
// function 記法でないと ESLint が怒るので無効化
// eslint-disable-next-line react/display-name
export const Child = forwardRef<HTMLInputElement, ChildProps>(
// このpropsに明示的な型定義がないと型エラーが出る
(props: ChildProps, ref) => {
const onChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
props.onChange(ev.target.value);
};
return (
<input
ref={ref}
type={props.type}
onChange={(ev) => onChange(ev)}
/>
);
}
);
Parent.tsx<Child />だけフォーカスが行くようにしてますimport { useEffect, useRef } from 'react';
import { Child } from './Child';
export const Parent = () => {
const ref = useRef<HTMLInputElement>(null);
useEffect(() => {
ref?.current?.focus();
}, []);
return (
<ul>
<li>
<Child
type={'text'}
onChange={(ev) => console.log('top input', ev)}
/>
</li>
<li>
<Child
ref={ref}
type={'text'}
onChange={(ev) => console.log('bottom input', ev)}
/>
</li>
</ul>
);
};