如何在类组件外部创建数组或引用状态兄弟到下一个兄弟 React.js [英] How to create an array outside class component or reference state sibling to next sibling React.js

查看：39
本文介绍了如何在类组件外部创建数组或引用状态兄弟到下一个兄弟 React.js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要一个单选按钮的解决方案，但作为主数组的选项数组在类组件之外.在这种情况下，我将通过 props 获取 OPTIONS 数组项，但不会硬编码.我怎么可能

  1. 在类组件外传递 props

  2. 创建 OPTIONS 状态对象，然后将其传递给处于状态内的复选框.

     import React, { Component } from "react";从./Checkbox"导入复选框；const OPTIONS = [一"、二"、三"];类 App 扩展组件 {状态 = {复选框:OPTIONS.reduce((选项，选项)=>({...选项，[选项]:假}),{})};selectAllCheckboxes = isSelected =>{Object.keys(this.state.checkboxes).forEach(checkbox => {//奖励:你能解释一下为什么我们将更新函数传递给 setState 而不是对象吗?this.setState(prevState => ({复选框:{...prevState.checkboxes,[复选框]:被选中}}));});};selectAll = () =>this.selectAllCheckboxes(true);取消全选 = () =>this.selectAllCheckboxes(false);handleCheckboxChange = changeEvent =>{const { name } = changeEvent.target;this.setState(prevState => ({复选框:{...prevState.checkboxes,[名称]: !prevState.checkboxes[名称]}}));};handleFormSubmit = formSubmitEvent =>{formSubmitEvent.preventDefault();Object.keys(this.state.checkboxes).filter(checkbox => this.state.checkboxes[checkbox]).forEach(复选框 => {console.log(复选框，被选中.")；});};createCheckbox = 选项 =>(<复选框标签={选项}isSelected={this.state.checkboxes[option]}onCheckboxChange={this.handleCheckboxChange}键={选项}/>);createCheckboxes = () =>OPTIONS.map(this.createCheckbox);使成为() {返回 (<div className="容器"><div className="row mt-5"><div className="col-sm-12"><form onSubmit={this.handleFormSubmit}>{this.createCheckboxes()}<div className="form-group mt-2"><按钮类型=按钮"className="btn btn-outline-primary mr-2";onClick={this.selectAll}>全选<按钮类型=按钮"className="btn btn-outline-primary mr-2";onClick={this.deselectAll}>取消全选<按钮类型=提交"className=btn btn-primary">保存

</表单>

);}}导出默认应用程序；

解决方案

您可以直接在状态中调用选项，然后使用构造函数将它们映射到复选框.希望这会有所帮助.

import React, { Component } from "react";从./Checkbox"导入复选框；类 App 扩展组件 {构造函数(道具){超级(道具)this.state.checkboxes = this.state.options.reduce((选项，选项)=>({...选项，[选项]:假}),{})}状态 = {选项:[一"、二"、三"]};selectAllCheckboxes = isSelected =>{Object.keys(this.state.checkboxes).forEach(checkbox => {//奖励:你能解释一下为什么我们将更新函数传递给 setState 而不是对象吗?this.setState(prevState => ({复选框:{...prevState.checkboxes,[复选框]:被选中}}));});};selectAll = () =>this.selectAllCheckboxes(true);取消全选 = () =>this.selectAllCheckboxes(false);handleCheckboxChange = changeEvent =>{const { name } = changeEvent.target;this.setState(prevState => ({复选框:{...prevState.checkboxes,[名称]: !prevState.checkboxes[名称]}}));};handleFormSubmit = formSubmitEvent =>{formSubmitEvent.preventDefault();Object.keys(this.state.checkboxes).filter(checkbox => this.state.checkboxes[checkbox]).forEach(复选框 => {console.log(复选框，被选中.")；});};createCheckbox = 选项 =>(<复选框标签={选项}isSelected={this.state.checkboxes[option]}onCheckboxChange={this.handleCheckboxChange}键={选项}/>);createCheckboxes = () =>this.state.options.map(this.createCheckbox);使成为() {返回 (<div className="容器"><div className="row mt-5"><div className="col-sm-12"><form onSubmit={this.handleFormSubmit}>{this.createCheckboxes()}<div className="form-group mt-2"><按钮类型=按钮"className="btn btn-outline-primary mr-2";onClick={this.selectAll}>全选<按钮类型=按钮"className="btn btn-outline-primary mr-2";onClick={this.deselectAll}>取消全选<按钮类型=提交"className=btn btn-primary">保存

</表单>

);}}导出默认应用程序；

I need a solution for radio buttons, but the options array which is the main array is outside the class component. In this case, I will get OPTIONS array items through props but not hardcoded. How is it possible for me to

  1. Pass props outside class component

  2. Make OPTIONS state object and then pass it to checkboxes, which is inside state.

     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;

解决方案

You can invoke options directly in state and then use constructor to map them to checkboxes. hope this helps.

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;

这篇关于如何在类组件外部创建数组或引用状态兄弟到下一个兄弟 React.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆