Checkbox 的状态未更新

Question

我正在使用复选框来存储用户首选项并将其发送到后端以进行进一步处理。我只想将选中的值存储在我的状态对象中。但是那没有得到更新。我尝试使用对象键方法来确定选中的值。但我无法获得更新状态的价值。我是 React 的新手，请原谅我的疑问。我在下面提供了一个片段。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedItems: {},
      count: 0,
      formObject: {
        subjects: []
      }
    }
  }
  
  onInputChange = (value, key) => {   
    const { formObject } = this.state;
    const {...formValues} =  formObject;
    formValues[key] = value;
    this.setState((prevState, currState) => {
        return {
            ...prevState,
            formObject: formValues
        };
    }, () => console.log(this.state.formObject));
  }
  
  handleChange = (event, formKey) => {
    const {name, checked} = event.target;
    const updatedCheckedItems = {...this.state.checkedItems, [name]: checked };

    this.setState({
        checkedItems: updatedCheckedItems,
        count: Object.values(updatedCheckedItems).filter((value) => value).length
    }, () => {this.onInputChange(Object.keys(updatedCheckedItems), 'subjects')});
  }
  
  render() {
  const checkedValues = {...this.state.checkedItems};
  const checkedCount =  Object.values(checkedValues).filter((value) => value).length;
  const checkboxes = [
      {
          name: "Math and economics",
          key: "mathsandeconomics",
          label: "Math and economics"
      },
      {
          name: "Science",
          key: "Science",
          label: "Science"
      },
      {
          name: "World languages",
          key: "World languages",
          label: "World languages"
      },
      {
          name: "Government and politics",
          key: "Government and politics",
          label: "Government and politics"
      },
      {
          name: "Art and design",
          key: "Art and design",
          label: "Art and design"
      },
      {
          name: "Technology",
          key: "Technology",
          label: "Technology"
      },
      ];
    return (
      <div className="App">
        <h1>Hello React</h1>
        {
          checkboxes.map((item, index) => (
            <label key={item.key}>
              <input type="checkbox" name={item.name} checked={this.state.checkedItems[item.name] || false}
              onChange={this.handleChange}
              disabled={!checkedValues[item.name] && checkedCount > 2} />{item.name}
            </label>
          ))}
        }
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

当您将数据传递给 onInputChange 函数时，您总是发送所有三个值，无论它们是否被选中。

您只需发送选中的值。这是您需要执行此操作的附加代码：

 () => {
    const arr = Object.entries(updatedCheckedItems);

    const updatedArray = arr.filter((arrkey) => {
      return arrkey[1] === true;
    });

    const result = Object.fromEntries(updatedArray);

    this.onInputChange(Object.keys(result), "subjects");
  }

CODESANDBOX LINK: https://codesandbox.io/s/checkboxissue-zlhtg

完整的工作代码：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedItems: {},
      count: 0,
      formObject: {
        subjects: []
      }
    };
  }

  onInputChange = (value, key) => {
    console.log(value);
    const { formObject } = this.state;
    const { ...formValues } = formObject;
    formValues[key] = value;
    this.setState(
      (prevState, currState) => {
        return {
          ...prevState,
          formObject: formValues
        };
      },
      () => console.log(this.state.formObject)
    );
  };

  handleChange = (event) => {
    const { name, checked } = event.target;
    const updatedCheckedItems = { ...this.state.checkedItems, [name]: checked };

    this.setState(
      {
        checkedItems: updatedCheckedItems,
        count: Object.values(updatedCheckedItems).filter((value) => value)
          .length
      },
      () => {
        const arr = Object.entries(updatedCheckedItems);

        const updatedArray = arr.filter((arrkey) => {
          return arrkey[1] === true;
        });

        const result = Object.fromEntries(updatedArray);

        this.onInputChange(Object.keys(result), "subjects");
      }
    );
  };

  render() {
    const checkedValues = { ...this.state.checkedItems };
    const checkedCount = Object.values(checkedValues).filter((value) => value)
      .length;
    const checkboxes = [
      {
        name: "Math and economics",
        key: "mathsandeconomics",
        label: "Math and economics"
      },
      {
        name: "Science",
        key: "Science",
        label: "Science"
      },
      {
        name: "World languages",
        key: "World languages",
        label: "World languages"
      },
      {
        name: "Government and politics",
        key: "Government and politics",
        label: "Government and politics"
      },
      {
        name: "Art and design",
        key: "Art and design",
        label: "Art and design"
      },
      {
        name: "Technology",
        key: "Technology",
        label: "Technology"
      }
    ];
    return (
      <div className="App">
        <h1>Hello React</h1>
        {checkboxes.map((item, index) => (
          <label key={item.key}>
            <input
              type="checkbox"
              name={item.name}
              checked={this.state.checkedItems[item.name] || false}
              onChange={this.handleChange}
              disabled={!checkedValues[item.name] && checkedCount > 2}
            />
            {item.name}
          </label>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App/>,document.querySelector("#react"))

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedItems: {},
      count: 0,
      formObject: {
        subjects: []
      }
    }
  }
  
  onInputChange = (obj, key) => {   
    const { formObject } = this.state;
    let data = Object.keys(obj).map(e =>{ if(obj[e]) return `${e}`;});
    data = data.filter(e => e ? e: '')
    formObject[key] = data;
    this.setState(  {
        
           
            formObject
       
    }, () => console.log(this.state.formObject));
  }
  
  handleChange = (event, formKey) => {
    const {name, checked} = event.target;

    const updatedCheckedItems = {...this.state.checkedItems, [name]: checked };

    this.setState({
        checkedItems: updatedCheckedItems,
        count: Object.values(updatedCheckedItems).filter((value) => value).length
    }, () => {
this.onInputChange(this.state.checkedItems, 'subjects')});
  }
  
  render() {
  const checkedValues = {...this.state.checkedItems};
  const checkedCount =  Object.values(checkedValues).filter((value) => value).length;
  const checkboxes = [
      {
          name: "Math and economics",
          key: "mathsandeconomics",
          label: "Math and economics"
      },
      {
          name: "Science",
          key: "Science",
          label: "Science"
      },
      {
          name: "World languages",
          key: "World languages",
          label: "World languages"
      },
      {
          name: "Government and politics",
          key: "Government and politics",
          label: "Government and politics"
      },
      {
          name: "Art and design",
          key: "Art and design",
          label: "Art and design"
      },
      {
          name: "Technology",
          key: "Technology",
          label: "Technology"
      },
      ];
    return (
      <div className="App">
        <h1>Hello React</h1>
        {
          checkboxes.map((item, index) => (
            <label key={item.key}>
              <input type="checkbox" name={item.name} checked={this.state.checkedItems[item.name] || false}
              onChange={this.handleChange}
              disabled={!checkedValues[item.name] && checkedCount > 2} />{item.name}
            </label>
          ))}
        }
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Checkbox 的状态未更新

State not getting updated for Checkbox

javascript

checkbox

reactjs