小编som*_*one的帖子

我有一张数字表。当我单击表格中的单元格时，它会切换活动状态。我想选择一个单元格并按 crtl 并选择另一个单元格，结果第一个和第二个之间的单元格将变为活动状态。如何实施？

代码笔https://codepen.io/geeny273/pen/GRJXBQP

<div id="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
</div>

const grid = document.getElementById("grid")

grid.onclick = (event) => {
  event.stopPropagation();
  const { className } = event.target;

  if (className.includes('cell')) {
    if (className.includes('active')) {
      event.target.className = 'cell';
    } else {
      event.target.className = 'cell active';
    }  
  }
}

它应该像轮班突出显示一样工作并且双向工作

当我将 DatePicker 的初始值设置为 null 时，它会阻止键盘输入。如何避免？沙盒示例https://codesandbox.io/embed/silly-black-y0dn7

function KeyboardDatePicker(props) {
  const [selectedDate, handleDateChange] = useState(null);

  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>
      <DatePicker
        keyboard
        clearable
        label="Masked input"
        format="DD.MM.YYYY"
        mask={value =>
          value
            ? [/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/]
            : []
        }
        value={moment(selectedDate)}
        onChange={date => {
          handleDateChange(date);
        }}
        disableOpenOnEnter
        animateYearScrolling={false}
      />
    </MuiPickersUtilsProvider>
  );
}

我有一个选择字段，但我无法使用 React Ref 获取此选择的宽度。

this.selectRef.current 是一个对象，但似乎没有办法获得元素的宽度

     <Select
        fullWidth
        ref={this.selectRef}
        onChange={event => {
          this.setState({
            value: event.target.value
          });
        }}
        value={this.state.value}
      >
        <MenuItem value={0}>Zero</MenuItem>
        <MenuItem value={1}>One</MenuItem>
        <MenuItem value={2}>Two</MenuItem>
        <MenuItem value={3}>Three</MenuItem>
        <MenuItem value={4}>Four</MenuItem>
      </Select>

沙盒示例https://codesandbox.io/embed/hungry-galileo-eydfw

有一个来自material-ui docs https://stackblitz.com/edit/mfj4la的格式化输入的示例

如何将掩码值[/ \ d /，/ \ d /，/ \ d /，/ \ d /，/ \ d /，/ \ d /，/ \ d /，/ \ d /]传递给TextMaskCustom组件来自父组件？

传递给组件的值可以是字符串数组。该字符串表示不同的方向：top, right, bottom, left。

如何为组件指定 proptypes 以仅允许指定方向的数组？

  <Arrows
    directions=['left', 'bottom'] // accepts the array
  />

  <Arrows
   directions=['left', 'back'] // doesn't accept the array
  />

当我使用一些图标菜单时，比 box-shadow 看起来很暗。如何解决？ 1：

Codesandbox 示例https://codesandbox.io/embed/flamboyant-tdd-r83u1

   <div>
      {items.map((item, index) => {
        return (
          <Fragment key={index}>
            <IconButton
              aria-owns={open ? "long-menu" : undefined}
              onClick={this.handleClick}
            >
              <MoreVertIcon />
            </IconButton>
            <Menu anchorEl={anchorEl} open={open} onClose={this.handleClose}>
              {options.map(option => (
                <MenuItem key={option} onClick={this.handleClose}>
                  {option}
                </MenuItem>
              ))}
            </Menu>
          </Fragment>
        );
      })}
    </div>