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 }
あなたの回答
tips
プレビュー