Как создать массив вне компонента класса или ссылочного брата по состоянию на следующего брата React. js

Question

Мне нужно решение для переключателей, но массив параметров, который является основным массивом, находится за пределами компонента класса. В этом случае я получу элементы массива OPTIONS через props, но не жестко запрограммированные. Как я могу

1. передать реквизиты вне компонента класса

2. Сделать объект состояния OPTIONS, а затем передать его флажкам, которые находятся внутри состояние.

    import React, { Component } from "react";
    import Checkbox from "./Checkbox";
   
    const OPTIONS = ["One", "Two", "Three"];
   
    class App extends Component {
      state = {
        checkboxes: OPTIONS.reduce(
          (options, option) => ({
            ...options,
            [option]: false
          }),
          {}
        )
      };
   
      selectAllCheckboxes = isSelected => {
        Object.keys(this.state.checkboxes).forEach(checkbox => {
          // BONUS: Can you explain why we pass updater function to setState instead of an object?
          this.setState(prevState => ({
            checkboxes: {
              ...prevState.checkboxes,
              [checkbox]: isSelected
            }
          }));
        });
      };
   
      selectAll = () => this.selectAllCheckboxes(true);
   
      deselectAll = () => this.selectAllCheckboxes(false);
   
      handleCheckboxChange = changeEvent => {
        const { name } = changeEvent.target;
   
        this.setState(prevState => ({
          checkboxes: {
            ...prevState.checkboxes,
            [name]: !prevState.checkboxes[name]
          }
        }));
      };
   
      handleFormSubmit = formSubmitEvent => {
        formSubmitEvent.preventDefault();
   
        Object.keys(this.state.checkboxes)
          .filter(checkbox => this.state.checkboxes[checkbox])
          .forEach(checkbox => {
            console.log(checkbox, "is selected.");
          });
      };
   
      createCheckbox = option => (
        <Checkbox
          label={option}
          isSelected={this.state.checkboxes[option]}
          onCheckboxChange={this.handleCheckboxChange}
          key={option}
        />
      );
   
      createCheckboxes = () => OPTIONS.map(this.createCheckbox);
   
      render() {
        return (
          <div className="container">
            <div className="row mt-5">
              <div className="col-sm-12">
                <form onSubmit={this.handleFormSubmit}>
                  {this.createCheckboxes()}
   
                  <div className="form-group mt-2">
                    <button
                      type="button"
                      className="btn btn-outline-primary mr-2"
                      onClick={this.selectAll}
                    >
                      Select All
                    </button>
                    <button
                      type="button"
                      className="btn btn-outline-primary mr-2"
                      onClick={this.deselectAll}
                    >
                      Deselect All
                    </button>
                    <button type="submit" className="btn btn-primary">
                      Save
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        );
      }
    }
   
    export default App;
   

Answer 1

Вы можете вызывать параметры прямо в состоянии, а затем использовать конструктор для сопоставления их с флажками. надеюсь, это поможет.

import React, { Component } from "react";
 import Checkbox from "./Checkbox";

 class App extends Component {
   constructor(props){
     super(props)
     this.state.checkboxes = this.state.options.reduce(
       (options, option) => ({
         ...options,
         [option]: false
       }),
       {}
     )
   }
   state = {
     options: ["One", "Two", "Three"]
   };

   selectAllCheckboxes = isSelected => {
     Object.keys(this.state.checkboxes).forEach(checkbox => {
       // BONUS: Can you explain why we pass updater function to setState instead of an object?
       this.setState(prevState => ({
         checkboxes: {
           ...prevState.checkboxes,
           [checkbox]: isSelected
         }
       }));
     });
   };

   selectAll = () => this.selectAllCheckboxes(true);

   deselectAll = () => this.selectAllCheckboxes(false);

   handleCheckboxChange = changeEvent => {
     const { name } = changeEvent.target;

     this.setState(prevState => ({
       checkboxes: {
         ...prevState.checkboxes,
         [name]: !prevState.checkboxes[name]
       }
     }));
   };

   handleFormSubmit = formSubmitEvent => {
     formSubmitEvent.preventDefault();

     Object.keys(this.state.checkboxes)
       .filter(checkbox => this.state.checkboxes[checkbox])
       .forEach(checkbox => {
         console.log(checkbox, "is selected.");
       });
   };

   createCheckbox = option => (
     <Checkbox
       label={option}
       isSelected={this.state.checkboxes[option]}
       onCheckboxChange={this.handleCheckboxChange}
       key={option}
     />
   );

   createCheckboxes = () => this.state.options.map(this.createCheckbox);

   render() {
     return (
       <div className="container">
         <div className="row mt-5">
           <div className="col-sm-12">
             <form onSubmit={this.handleFormSubmit}>
               {this.createCheckboxes()}

               <div className="form-group mt-2">
                 <button
                   type="button"
                   className="btn btn-outline-primary mr-2"
                   onClick={this.selectAll}
                 >
                   Select All
                 </button>
                 <button
                   type="button"
                   className="btn btn-outline-primary mr-2"
                   onClick={this.deselectAll}
                 >
                   Deselect All
                 </button>
                 <button type="submit" className="btn btn-primary">
                   Save
                 </button>
               </div>
             </form>
           </div>
         </div>
       </div>
     );
   }
 }

 export default App;