{"id":494,"date":"2024-03-30T03:11:16","date_gmt":"2024-03-29T18:11:16","guid":{"rendered":"https:\/\/www.kd2.jp\/memo3\/?p=494"},"modified":"2024-03-30T03:13:56","modified_gmt":"2024-03-29T18:13:56","slug":"react-%e5%8b%95%e7%9a%84%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e8%a1%8c%e3%81%a8%e3%82%bb%e3%83%ac%e3%82%af%e3%83%88%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9","status":"publish","type":"post","link":"https:\/\/www.kd2.jp\/memo3\/?p=494","title":{"rendered":"React \u52d5\u7684\u30c6\u30fc\u30d6\u30eb\u884c\u3068\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9"},"content":{"rendered":"<p><a href=\"https:\/\/www.kd2.jp\/sandbox\/reacttest2\/\">\u52d5\u4f5c\u30c6\u30b9\u30c8<\/a><\/p>\n<p><\/p>\n<div class=\"wp-block-codemirror-blocks code-block \">\n<pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;eclipse&quot;,&quot;lineNumbers&quot;:true,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}\">import { useEffect, useState } from 'react';\r\n\r\ninterface TestInterface {\r\n  id: number;\r\n  field1: string;\r\n  field2: string;\r\n}\r\n\r\nlet defs = [\r\n  {key:'-', value:'-'}, {key:'001', value:'A'},\r\n  {key:'002', value:'B'}, {key:'003', value:'C'},\r\n  {key:'004', value:'D'}, {key:'005', value:'E'},\r\n  {key:'006', value:'F'}, {key:'007', value:'G'}\r\n];\r\n\r\nlet columns = new Map();\r\ncolumns.set('001', ['dataA-1', 'dataA-2', 'dataA-3']);\r\ncolumns.set('002', ['dataB-1', 'dataB-2', 'dataB-3']);\r\ncolumns.set('003', ['dataC-1', 'dataC-2', 'dataC-3']);\r\ncolumns.set('004', ['dataD-1', 'dataD-2', 'dataD-3']);\r\ncolumns.set('005', ['dataE-1', 'dataE-2', 'dataE-3']);\r\ncolumns.set('006', ['dataF-1', 'dataF-2', 'dataF-3']);\r\ncolumns.set('007', ['dataG-1', 'dataG-2', 'dataG-3']);\r\n\r\nconst CustomTable = () =&gt; {\r\n  const [users, setUsers] = useState&lt;TestInterface[]&gt;([]);\r\n  const[count, setCount] = useState&lt;number&gt;(1);\r\n\r\n  useEffect(() =&gt; {\r\n  }, [users]);\r\n\r\n  const addRow = () =&gt; {\r\n    const user : TestInterface = { id: count,  field1: '-', field2: '-' };\r\n    setCount(count+1);\r\n    setUsers([...users, user]);\r\n  }\r\n\r\n  const deleteRow = (i : number) =&gt; {\r\n    setUsers(users.filter((user) =&gt; (user.id !== i)));\r\n  }\r\n\r\n  const upRow = (id: number, index:number) =&gt; {\r\n    if (index === 0 || users.length &lt; 2) {\r\n      return;\r\n    }\r\n    for (let j = 1; j &lt; users.length; j++) {\r\n      const user2 : TestInterface = users[j];\r\n      if (user2.id === id) {\r\n        setUsers((prevState) =&gt; {\r\n          \/\/ \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u30b3\u30d4\u30fc\u3057\u306a\u3044\u3068\u518d\u63cf\u753b\u3055\u308c\u306a\u3044\u3002\r\n          let tempUsers : TestInterface[] = [...prevState];\r\n          const moving = tempUsers.splice(j, 1)[0];\r\n          tempUsers.splice(j - 1, 0, moving);\r\n          return tempUsers;\r\n        });\r\n        break;\r\n      }\r\n    }\r\n  }\r\n\r\n  const downRow = (id: number, index:number) =&gt; {\r\n    if (index === users.length -1 || users.length &lt; 2) {\r\n      return;\r\n    }\r\n    for (let j = 0; j &lt; users.length-1; j++) {\r\n      const user2 : TestInterface = users[j];\r\n      if (user2.id === id) {\r\n        setUsers((prevState) =&gt; {\r\n          \/\/ \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u30b3\u30d4\u30fc\u3057\u306a\u3044\u3068\u518d\u63cf\u753b\u3055\u308c\u306a\u3044\u3002\r\n          let tempUsers : TestInterface[] = [...prevState];\r\n          const moving = tempUsers.splice(j, 1)[0];\r\n          tempUsers.splice(j + 1, 0, moving);\r\n          return tempUsers;\r\n        });\r\n        break;\r\n      }\r\n    }\r\n  }\r\n\r\n  const onChange1 = (id: number, e: any) =&gt; {\r\n    setUsers((prevState) =&gt; {\r\n      \/\/ \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u30b3\u30d4\u30fc\u3057\u306a\u3044\u3068\u518d\u63cf\u753b\u3055\u308c\u306a\u3044\u3002\r\n      let tempUsers : TestInterface[] = [...prevState];\r\n      let test1: TestInterface = tempUsers.filter((elem) =&gt; elem.id === id)[0];\r\n      test1.field1 = e.target.value;\r\n      return tempUsers;\r\n    });\r\n  }\r\n\r\n  const onChange2 = (id: number, e: any) =&gt; {\r\n    setUsers((prevState) =&gt; {\r\n      \/\/ \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u30b3\u30d4\u30fc\u3057\u306a\u3044\u3068\u518d\u63cf\u753b\u3055\u308c\u306a\u3044\u3002\r\n      let tempUsers : TestInterface[] = [...prevState];\r\n      let test1: TestInterface = tempUsers.filter((elem) =&gt; elem.id === id)[0];\r\n      test1.field2 = e.target.value;\r\n      return tempUsers;\r\n    });\r\n  }\r\n\r\n  const Field2 = (props: any) =&gt; {\r\n    if (props.user.field1 === '-') {\r\n      return (\r\n        &lt;select name=\"field2\" onChange={(e) =&gt; onChange2(props.user.id, e)} value={props.user.field2}&gt;\r\n          &lt;option value=\"-\"&gt;-&lt;\/option&gt;\r\n        &lt;\/select&gt;\r\n      );\r\n    }\r\n    else {\r\n      const options: string[] = columns.get(props.user.field1);\r\n      return (\r\n        &lt;select name=\"field2\" onChange={(e) =&gt; onChange2(props.user.id, e)} value={props.user.field2}&gt;\r\n          {options.map((value: string, index: number) =&gt; (\r\n            &lt;option value={value} key={index}&gt;{value}&lt;\/option&gt;\r\n          ))}\r\n        &lt;\/select&gt;\r\n      );\r\n    }\r\n  }\r\n\r\n  const setData = (e: any) =&gt; {\r\n    if (e.target.value === '1') {\r\n      const _users : TestInterface[] = [\r\n        { id: 1,  field1: '001', field2: 'dataA-1' },\r\n        { id: 2,  field1: '-', field2: '-' },\r\n        { id: 3,  field1: '002', field2: 'dataB-1' },\r\n      ];\r\n      setCount(_users.length + 1);\r\n      setUsers(_users);\r\n    }\r\n    else if (e.target.value === '2') {\r\n      const _users : TestInterface[] = [\r\n        { id: 1,  field1: '003', field2: 'dataC-1' },\r\n        { id: 2,  field1: '-', field2: '-' },\r\n        { id: 3,  field1: '004', field2: 'dataD-1' },\r\n        { id: 4,  field1: '005', field2: 'dataE-3' },\r\n      ];\r\n      setCount(_users.length + 1);\r\n      setUsers(_users);\r\n    }\r\n    else if (e.target.value === '3') {\r\n      const _users : TestInterface[] = [\r\n        { id: 1,  field1: '003', field2: 'dataC-1' },\r\n        { id: 2,  field1: '-', field2: '-' },\r\n        { id: 3,  field1: '004', field2: 'dataD-1' },\r\n        { id: 4,  field1: '004', field2: 'dataD-2' },\r\n        { id: 5,  field1: '005', field2: 'dataE-3' },\r\n      ];\r\n      setCount(_users.length + 1);\r\n      setUsers(_users);\r\n    }\r\n  }\r\n\r\n  return (\r\n    &lt;div&gt;\r\n      \u30c7\u30fc\u30bf\u306e\u30ed\u30fc\u30c9\r\n      &lt;select onClick={(e) =&gt; setData(e)}&gt;\r\n        &lt;option value=\"-\"&gt;-&lt;\/option&gt;\r\n        &lt;option value=\"1\"&gt;1&lt;\/option&gt;\r\n        &lt;option value=\"2\"&gt;2&lt;\/option&gt;\r\n        &lt;option value=\"3\"&gt;3&lt;\/option&gt;\r\n      &lt;\/select&gt;\r\n      &lt;table&gt;\r\n        &lt;thead&gt;\r\n          &lt;tr&gt;\r\n            &lt;th&gt;ID&lt;\/th&gt;\r\n            &lt;th&gt;\u30d5\u30a3\u30fc\u30eb\u30c91&lt;\/th&gt;\r\n            &lt;th&gt;\u30d5\u30a3\u30fc\u30eb\u30c92&lt;\/th&gt;\r\n            &lt;th&gt;&lt;\/th&gt;\r\n          &lt;\/tr&gt;\r\n        &lt;\/thead&gt;\r\n        &lt;tbody&gt;\r\n          {users.map((user: TestInterface, index: number) =&gt; (\r\n            &lt;tr\r\n                key={user.id}\r\n            &gt;\r\n              &lt;td&gt;{user.id}&lt;\/td&gt;\r\n              &lt;td&gt;\r\n                &lt;select name=\"field1\" onChange={(e) =&gt; onChange1(user.id, e)} value={user.field1}&gt;\r\n                  {defs.map((item: any, index: number) =&gt; (\r\n                    &lt;option value={item.key} key={index}&gt;{item.value}&lt;\/option&gt;\r\n                  ))}\r\n                &lt;\/select&gt;\r\n              &lt;\/td&gt;\r\n              &lt;td&gt;\r\n                &lt;Field2 user={user} \/&gt;\r\n              &lt;\/td&gt;\r\n              &lt;td&gt;\r\n                &lt;button onClick={() =&gt; upRow(user.id, index)}&gt;\u4e0a\u3078&lt;\/button&gt;\r\n                &lt;button onClick={() =&gt; downRow(user.id, index)}&gt;\u4e0b\u3078&lt;\/button&gt;\r\n                &lt;button onClick={() =&gt; deleteRow(user.id)}&gt;\u524a\u9664&lt;\/button&gt;\r\n              &lt;\/td&gt;\r\n            &lt;\/tr&gt;\r\n          ))}\r\n        &lt;\/tbody&gt;\r\n      &lt;\/table&gt;\r\n      &lt;button onClick={() =&gt; addRow()}&gt;\u8ffd\u52a0&lt;\/button&gt;\r\n    &lt;\/div&gt;\r\n  );\r\n};\r\n\r\nexport default CustomTable;<\/pre>\n<\/div>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u52d5\u4f5c\u30c6\u30b9\u30c8 import { useEffect, useState } from &#8216;react&#8217;; interface TestInterface { id: number; field1: string; field&hellip; <a class=\"more-link\" href=\"https:\/\/www.kd2.jp\/memo3\/?p=494\">\u7d9a\u304d\u3092\u8aad\u3080 <span class=\"screen-reader-text\">React \u52d5\u7684\u30c6\u30fc\u30d6\u30eb\u884c\u3068\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17],"tags":[],"_links":{"self":[{"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/posts\/494"}],"collection":[{"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=494"}],"version-history":[{"count":5,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/posts\/494\/revisions"}],"predecessor-version":[{"id":499,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/posts\/494\/revisions\/499"}],"wp:attachment":[{"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}