React hooksで複数の状態を定義する

はじめに

「React hooksを試してみた」という記事の続きです。
今回も個人的なメモレベルです。

hooksで複数の状態を定義する

まぁタイトルのままなのですが、コンポーネントを作る時に、hookを利用して、状態を複数持ちたいというのは、当然要件としてあります。その場合は、複数定義する事は全然問題ありません。

以下に例を示します。

また、この関数コンポーネントは外からpropsを受け取ってます。その際に、defaultPropsで、propsに値が渡されなかった際のデフォルト値を定義しています。

状態を３つ定義する

const App = (props) => {

    const [title, setTitle] = useState(props.title);
    const [author, setAuthor] = useState(props.author);
    const [price, setPrice] = useState(props.price);

    const reset = () => {
        setPrice(1000);
        setAuthor(props.author);
        setTitle(props.title);
    }

    return(
        <>
            <p>
                {author}の新譜が発表されました。
                タイトルは{title}です。<br />

                値段はあたなが自由につけられます。<br />
                いくらで買いますか？<br />
            </p>
            <p>
                {price}円で買います。
            </p>

            <div>
                <button onClick={()=> setPrice(price + 100)}>+100</button>
                <button onClick={()=> setPrice(price - 100)}>+100</button>
                <button onClick={reset}>Reset</button>
            </div>

            <label htmlFor="author">Author</label>
            <input id="author" type="text" value={author} onChange={(e) => setAuthor(e.target.value)}/>

            <label htmlFor="title">Title</label>
            <input id="title" type="text" value={title} onChange={(e) => setTitle(e.target.value)}/>

        </>
    )
}

App.defaultProps = {
    title: '',
    author: '',
    price: 1000
}

export default App;

もう少しリファクタしてみる

useStateで渡す初期値の引数はオブジェクトを渡すことが出来ます。
より抽象的に状態を定義できます。

以下、実装例です。

リファクタ

const App = (props) => {

    const [state, setState] = useState(props);
    const reset = () => {
        setState(props);
    };

    return(
        <>
            <p>
                {state.author}の新譜が発表されました。
                タイトルは{state.title}です。<br />

                値段はあたなが自由につけられます。<br />
                いくらで買いますか？<br />
            </p>
            <p>
                {state.price}円で買います。
            </p>

            <div>
                <button onClick={()=> setState({...state, price: state.price + 100})}>+100</button>
                <button onClick={()=> setState({...state, price: state.price - 100})}>+100</button>
                <button onClick={reset}>Reset</button>
            </div>

            <label htmlFor="author">Author</label>
            <input id="author" type="text" value={state.author} onChange={(e) => setState({...state, author: e.target.value})}/>

            <label htmlFor="title">Title</label>
            <input id="title" type="text" value={state.title} onChange={(e) => setState({...state, title: e.target.value})}/>

        </>
    )
}

App.defaultProps = {
    title: '',
    author: '',
    price: 1000
}

export default App;

基本的には関数コンポーネントで実装をしていく方針でよさそうです。

クラスコンポーネントで実装する機会とかあるとすれば、既存のクラスコンポーネントを継承して機能を拡張するケースや、サードパーティーのクラスコンポーネントを拡張したい時ぐらい？

いずれにせよ早く使いこなせるように精進精進