検索条件
お知らせ
現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。
Laravel + SQLServerとかやるときのメモ
sudo yum install -y epel-release
sudo yum install -y http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
sudo yum update
# これがないと SQLServer への接続でコケる
sudo yum localinstall https://packages.microsoft.com/rhel/7/prod/msodbcsql17-17.4.1.1-1.x86_64.rpm
# Laravel が起動するのに必要な様々ないろいろ
sudo yum install -y php74 php74-php-common php74-php-cli php74-php-mbstring php74-php-gd php74-php-pear php74-php-pdo php74-php-mcrypt php74-php-xmlrpc php74-php-soap php74-php-devel php74-php-intl php74-php-xml php74-php-sqlsrv
# php で呼べるようにしとく
sudo ln -s /usr/bin/php74 /usr/bin/php
- microsoft.comからWindows用のドライバを落としてきて適当な場所に展開する
- コマンドプロンプトで
php -r "phpinfo()" > phpinfo
する
- 上記で吐き出した結果を
Thread
で検索、Thread SafeかUnSafeか調べる
- 落としてきたドライバからバージョンとThreadが合うものを探して
php\ext
に配置
php.ini
のDynamic Extensions
セクションに次のような感じで記述
# php_と.dllは勝手に補完される
extension=pdo_sqlsrv_74_ts_x64
extension=sqlsrv_74_ts_x64
php -r "phpinfo()" > phpinfo
してsqlsrv
が確認できたらOK
Env |
Ver |
React |
17.0.1 |
TypeScript |
4.1.3 |
- 今回はサンプルとして
<input />
をラップしたコンポーネントのフォーカスを変更するためにref
を使います
import { 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)}
/>
);
}
);
- 下側の
<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>
);
};