質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

356閲覧

MaterialUIのSwitchの連動

n000n00

総合スコア25

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/08/27 14:20

SwitchでON:「完了も含めて表示」、OFF:「完了以外を表示」をコントロールしています。

登録、更新、削除後の描画はが完了以外のレコードをapiでGETして描画しています。

SwitchをONの状態で登録等のイベントを実行した後、SwitchをOFFにしたいです。(連動させたい)

何か良い方法があればご教示頂きたいです。

そもそも構造的に無理等、ご指摘もあれば、教えて頂きたいです。

React

1 2export function SwitchLabels(props) { 3 const [state, setState] = React.useState({ 4 checkedB: false, 5 }); 6 7 const handleChange = (event) => { 8 console.log(state); 9 setState({ ...state, [event.target.name]: event.target.checked }); 10 if (!state.checkedB) { 11 props.getDoneDatas() 12 } else { 13 props.getAll(); 14 } 15 }; 16 17 return ( 18 <FormGroup row> 19 <FormControlLabel 20 control={<Switch checked={state.checkedB} onChange={handleChange} name="checkedB" />} 21 label="完了も表示する" 22 /> 23 </FormGroup> 24 ); 25}

React

1 render() { 2 {/* alert */ } 3 let errorAlert; 4 if (!this.state.input) { 5 console.log(this.state.input); 6 errorAlert = <InputAlert 7 messege={this.state.message} 8 input={this.state.input} />; 9 } 10 return ( 11 <React.Fragment> 12 {/* add from */} 13 {errorAlert} 14 <SwitchLabels 15 checked={this.state.checked} 16 todos={this.state.todos} 17 getAll={this.getAll} 18 getDoneDatas={this.getDoneDatas} 19 /> 20

React

1 updateStatus(todo) { 2 axios 3 .post('api/todos/update/', { 4 user_id: todo.user_id, 5 id: todo.id, 6 status: this.state.status 7 }) 8 .then((res) => { 9 this.setState({ 10 todos: res.data, 11 id:'', 12 status: '', 13 }); 14 }) 15 .catch(error => { 16 console.log(error); 17 }); 18 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問