如何在 ReactJS 中为复选框设置值

Question

我尝试使用复选框来显示我的价值。控制台日志总是有价值的。但它没有为复选框设置。这是我的问题的代码和图像：

     var NotePage = createClass({
 

      addTags(e) {
        console.log("id****************", e.target.id);
        let id = e.target.id;
        let selectedTags = this.state.selectedTags;
        if (selectedTags.includes(id)) {
          var index = selectedTags.indexOf(id)
          selectedTags.splice(index, 1);
        } else {
          selectedTags.push(id);
        }
        console.log("id****************selectedTags", selectedTags);

        this.setState({
          selectedTags: selectedTags
        })

       },







     render: function () {
       assignStates: function (note, token, tagCategories) {
   
           let fields = [];
           fields["title"] = note.title_en;
           fields["body"] = note.body_en;
           let selectedFileName = null
   
           if (note.file_url_en != "") {
             console.log("note.file_url_en ", note.file_url_en);
             selectedFileName = note.file_url_en
   
           }
           let selectedTags = [];
           let n = 0;
           (note.note_tag).forEach(tag => {
             selectedTags.push(tag.id.toString());
             n++;
           });
   
           console.log("id****************first", selectedTags);
   
           let initial_values = {
             note: note,
             id: note.id,
             api: new Api(token),
             message: "",
             title: note.title_en,
             body: note.body_en,
             fields: fields,
             isEdit: false,
             selectedTags: selectedTags,
             tagCategories: tagCategories,
             selectedFileName: selectedFileName,
           }
           return initial_values;
       },
   
       const { selectedTags } = this.state;
             {(tagCategory.tags).map((tag) => (
                           <div className="col-3">
                             <div>
                               <input
                                 type="checkbox"
                                 value={selectedTags.includes(tag.id)}
                                 id={tag.id}
                                 onChange={this.addTags} />
                               <label style={{ marginLeft: "10px", fontSize: "15px" }}>
                                 {tag.name_en}
                               </label>
                             </div>
                           </div>
              ))
      }
   })

Image related for the problem

Answer 1

您遇到了状态突变的问题。您保存对当前状态的引用，对其进行变异，然后将其保存回状态。这打破了 React 在协调期间使用浅层引用相等性检查来确定需要刷新到 DOM 的内容。

addTags(e) {
  let id = e.target.id;

  let selectedTags = this.state.selectedTags; // reference to state

  if (selectedTags.includes(id)) {
    var index = selectedTags.indexOf(id)
    selectedTags.splice(index, 1); // mutation!!
  } else {
    selectedTags.push(id); // mutation!!
  }

  this.setState({
    selectedTags: selectedTags // same reference as previous state
  });
},

为了补救你必须返回一个新的数组对象引用。

addTags(e) {
  const { id } = e.target;

  this.setState(prevState => {
    if (prevState.selectedTags.includes(id)) {
      return {
        selectedTags: prevState.selectedTags.filter(el => el !== id),
      };
    } else {
      return {
        selectedTags: prevState.selectedTags.concat(id),
      };
    }
  });
},

Answer 2

使用“checked”属性。

                         <input
                          type="checkbox"

                          value={tag.id}
                          checked={selectedTags.includes(tag.id)}
                          id={tag.id}

                          onChange={this.addTags} />

还有，关于复选框中的 value 属性：

表示复选框值的 DOMString。这不会在客户端显示，但在服务器上，这是使用复选框名称提交的数据的值。

注意：如果在提交表单时未选中复选框，则会出现 没有值提交给服务器以表示其未选中状态 （例如值=未选中）；该值未提交到服务器 全部。如果您想提交复选框的默认值 未选中，您可以在 可能由 JavaScript 生成的具有相同名称和值的表单。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value

Answer 3

我认为你应该使用检查属性而不是值。

参考检查反应js文档here

Answer 4

您正在使用selectedTags.splice(index, 1); 和selectedTags.push(id); 直接改变状态变量

您需要做的是复制状态变量并更改它：

      addTags(e) {
        let id = e.target.id;
        if (this.state.selectedTags.includes(id)) {
          this.setState(state => (
            {...state, selectedTags: state.selectedTags.filter(tag => tag !== id)}
          ))
        } else {
          this.setState(state => (
            {...state, selectedTags: [...state.selectedTags, id]}
          ))
        }
       }