☰

Reactチェックボックスが更新されない質問する

tag-icon • tag-icon javascript reactjs checkbox redux react-redux
Reactチェックボックスが更新されない質問する

チェックボックスが true に切り替わるたびに配列を更新したいです。現在のコードでは、チェックボックスをクリックすると false とログに記録されます。状態を更新したばかりなのにです。setState は API 呼び出しのように時間がかかるのでしょうか? 私には意味がわかりません。

import React, {Component} from 'react';

class Person extends Component {

  constructor(props) {
    super(props);

    this.state = {
      boxIsChecked: false
    };

    this.checkboxToggle = this.checkboxToggle.bind(this);
  }

  checkboxToggle() {
    // state is updated first
    this.setState({ boxIsChecked: !this.state.boxIsChecked });
    console.log("boxIsChecked: " + this.state.boxIsChecked);
    if (this.state.boxIsChecked === false) {
      console.log("box is false. should do nothing.");
    }
    else if (this.state.boxIsChecked === true) {
      console.log("box is true. should be added.");
      this.props.setForDelete(this.props.person._id);
    }

  }

    render() {
        return (
          <div>
            <input type="checkbox" name="person" checked={this.state.boxIsChecked} onClick={this.checkboxToggle} />
            {this.props.person.name} ({this.props.person.age})
          </div>
        );
    }
}

export default Person;

onClickの代わりにonChangeを試してみました。基本的なコンポーネントの定式化については、すでに読んだアドバイスに従っているように感じます。ここそしてここ他の値に Redux を使用しているという事実は何か影響しますか? チェックボックスを制御するのではなく、チェックボックスの内容を読み取る方法はありますか? (チェックボックス自体は正常に動作し、チェックされているかどうかに関係なく DOM が正しく更新されます。)

ベストアンサー1

このスレッドには回答があることは承知していますが、私もこれに対する解決策を持っています。チェックボックスが、setState の指定された値で更新されなかったことがわかります。この問題の正確な理由はわかりませんが、ここに解決策があります。

<input
  key={Math.random()}
  type="checkbox"
  name="insurance"
  defaultChecked={data.insurance}
 />

キー値に random を指定すると、チェックボックスが再レンダリングされ、チェックボックスの値が更新されます。これは私の場合はうまくいきました。また、フックを使用していますが、クラスベースの実装でも機能するはずです。

参照：https://www.reddit.com/r/reactjs/comments/8unyps/am_i_doing_stupid_or_is_this_a_bug_checkbox_not/

おすすめ記事