State 未更新復選框

Question

我正在使用復選框來存儲用戶首選項並將其發送到后端以進行進一步處理。 我只想將檢查的值存儲在我的 state object 中。 但那沒有得到更新。 我嘗試使用 Object 鍵方法來確定檢查值。 但我無法獲得更新我的 state 的值。 我是 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 function 時，您始終會發送所有三個值，無論它們被選中還是未選中。

您只需要發送檢查的值。 這是您需要執行此操作的附加代碼：

 () => {
    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 鏈接： 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>