Question

我正在构建我的第一个反应应用程序，我的应用程序的一个重要组件是一套美观的单选按钮，将在我的大多数应用程序页面上使用，其值用于过滤我正在绘制的数据。为了使组件更简单，我决定使用react-bootstrap的ToggleButton和ToggleButtonGroup组件，然后创建我的表示组件 ToolButtonGroup 作为react-bootstrap组件的包装。

到目前为止， ToolButtonGroup.js ：

import React, {Component} from 'react';
import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap';

class ToolButtonGroup extends Component {

    constructor(props) {
        super(props);
    }

    handleChartTypeChange = (e) => {
        this.props.handler();
    }

    render() {

        // Get Variables from the params prop
        const { header, buttons, initialVal } = this.props.params;
        const { borderRadius, margin, padding, fontsize, border } = this.props.params;
        const { gridID, gridColumns, minRowHeight } = this.props.params;

        // Create the individual buttons
        const pageButtons = buttons.map((buttoninfo, idx) => {
            return (
                <ToggleButton 
                    key={idx}
                    style={{
                        "borderRadius": borderRadius, 
                        "margin": margin,
                        "padding": padding,
                        "fontSize": fontsize,
                        "border": border
                    }}
                    bsSize="large"
                    value={buttoninfo.value}>
                {buttoninfo.label}
                </ToggleButton>
            )
        })

        // Return the button group
        return(
            <div className="buttons-container"
                 style={{"border": "1px solid red";}}
                 id={gridID}>
                <h2 style={{
                  "width": "100%";
                  "margin": "0 auto";
                  "fontSize": "1.75em";
                  "marginTop": "5px";   
                  "border": "none";
                }}
                >{header}</h2>
                <ToggleButtonGroup 
                    type="radio"
                    name="charttype-options" 
                    defaultValue={initialVal} 
                    onChange={this.props.handler}
                    style={{
                        "display": "grid",
                        "gridTemplateColumns": "repeat(" + gridColumns + ", 1fr)",
                        "gridAutoRows": "auto",
                        "gridGap": "8px"
                    }}
                >
                    {pageButtons}
                </ToggleButtonGroup>
            </div>
        )
    }   
}

export default ToolButtonGroup;

我使用传递给此组件的参数在ToggleButtonGroup中创建ToggleButtons的css网格。按钮的数据/初始值，大部分样式以及网格数据都来自父组件的道具。

（我实际上不确定是否使用react-bootstrap组件使这个组件变得更容易或更难自己......）

最后，为了演示调用ToolButtonGroup，我有一个容器组件 starterContainer.js ，它创建了两个工具按钮组：

import React, {Component} from 'react';
import ToolButtonGroup from 'ToolButtonGroup';

// Import CSS for this App
import './starterContainer.css';

class StarterApp extends Component {
    constructor(props){
        super(props);
        this.state = {
            pitchersOrHitters: "",
            position: ""
        }
    }

    // Button and Select Handlers!
    handlePitchHitChange = (pitchersOrHitters) => {
        this.setState({pitchersOrHitters})
    }
    handlePositionChange = (position) => {
        this.setState({ position: position });
    }

    render() {

        // 0. Load State and Props 
        const { pitchersOrHitters, position } = this.state;


        // Pitcher or Hitter Radio Button Group params
        const pitchOrHitButtonGroup = {
            borderRadius: "25px",
            margin: "1% 10%",
            padding: "5%",
            fontsize: "2em",
            border: "2px solid #BBB",

            gridColumns: 1, minRowHeight: "10px", "gridID": "buttons1",

            header: "Choose One:",          
            buttons: [
                { value: "Pitchers", label: "Pitchers" },
                { value: "Hitters", label: "Hitters" },
            ],
            initialVal: "Pitchers"}

        // Pitcher or Hitter Radio Button Group params
        const positionButtonGroup = {
            borderRadius: "10px",
            margin: "1% 10%",
            padding: "5%",
            fontsize: "1.25em",
            border: "2px solid #BBB",

            gridColumns: 4, minRowHeight: "20px", "gridID": "buttons2",

            header: "Choose One:",          
            buttons: [
                { value: "SP", label: "SP" },
                { value: "RP", label: "RP" },
                { value: "1B", label: "1B" },
                { value: "2B", label: "2B" },
                { value: "SS", label: "SS" },
                { value: "3B", label: "3B" },
                { value: "LF", label: "LF" },
                { value: "RF", label: "RF" },
                { value: "CF", label: "CF" }
            ],
            initialVal: "SP"}


        return(
            <div className="chart-grid-container">
                <ToolButtonGroup
                    params={pitchOrHitButtonGroup}
                    value={pitchersOrHitters}
                    handler={this.handlePitchHitChange} />    

                <ToolButtonGroup
                    params={positionButtonGroup}
                    value={position}
                    handler={this.handlePositionChange} />    
            </div>
        )
    }
}

唯一的补充是用于buttongroup和其他组件布局的css网格。 staterContainer的这个网格也将包含许多其他组件，包括Select小部件和其他小部件组件，以及绘制D3图形本身的组件。起初，这个starterComponent css网格看起来没用，但是稍后对我的页面有帮助，我想保留它。

starterComponent.css

.chart-grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(200px, auto);
    grid-gap: 5px;
    grid-template-areas:
        "btns1 btns1 btns2 btns2 btns2 btns2 . . . . . .";
}

#buttons1 { grid-area: btns1; }     
#buttons2 { grid-area: btns2; }

有了这个，我有几个问题/问题：

1。错误：当我的组件最初加载时，ToggleButtons挂在CSS网格的父容器中指定的边框之外。但是，当我单击任何按钮时，ToggleButtons会调整大小以适应网格容器内部。我认为这是由于两个组件之间的一些格式错误传达而发生的，但我不知道如何解决这个问题。

我的handleChartTypeChange函数没有做任何事情，因为我将this.props.handler直接传递给ToggleButtonGroup。我可以摆脱handlechartTypeChange吗？或者我还应该使用它吗？
我的starterContainer有2个句柄更改功能......是否有一种简单的方法可以将其转换为1个句柄更改功能？这似乎是重复的，我也可能在页面上有两个以上的按钮组。
通常，作为将在我的大多数应用程序中使用的组件以及具有重要功能的组件，我想确保我正确地创建它。
我将初始值传递给我的按钮组两次 - 一次在传递给ToolButtonGroup组件的参数中，一次也作为初始状态传递给starterComponent。如何删除此重复项？

感谢任何帮助 - 对于我来说，正确创建我正在创建的图形工具的Web应用程序，这是一个重要的组件。如果它的功能不正常，我肯定会在其他地方遇到问题。

Answer 1

您的大部分问题可能更多地针对codereview.stack，但我对此有一些想法。

1。还不是网格主，但是网格的直接子节点（带有类＆＃34; chart-grid-container＆＃34;的容器元素）是一个带有类＆＃34; buttons-container＆＃34;的元素。你不得不想知道如果在那个css类下定义了什么。第二次观察，一目了然at this doc page，就是你错过了grid-area规则，我想知道是否＆＃34; gridID＆＃34;道具是为了配合它。

2。如果您希望稍后将向该处理程序添加其他本地逻辑，那么就保留它。否则你就不需要了。

3。我实际上为了清楚起见，每个人都有自己独立的命名处理程序。另一方面，如果有一大堆这些组件和重复逻辑，我可能会使用es6对象的动态道具名称，例如：

    // pseudo code!
    handleChange = (key_name) => {
      return (new_value) =>
        this.setState({
          [key_name]: new_value
        })
    }

   // later ...
   handler={this.handleChange('position')} />

4。对于你的ToolButtonGroup组件，如果它不会带有自己的本地状态，那么在不需要构造函数和处理程序包装器的情况下你应该make it a function（如上所述）

第二个观察，是否有必要将道具全部传入另一个命名空间（＆＃34; params＆＃34;）？它似乎没有任何目的。我确实认为你在为自己的对象中的每个组件实例指定道具，但我接下来要做的只是将它们传播到JSX中，然后直接从this.props as outlined here引用它们。 / p>

           <ToolButtonGroup
                {...positionButtonGroupProps}
                handler={this.handleChange('position')} />

5。我对这个问题有点不清楚，因为我实际上没有发现value中引用的ToolButtonGroup道具？也许我掩饰了它。无论如何，我只是将它附加到如上所述的道具对象

React - 我的简单单选按钮组件放在css网格上的错误问题

1 个答案: