Question

遇到此ReactJS（带Redux）问题（图片为：http://oi67.tinypic.com/jiywpj.jpg） - 如果未选择高级白色，则应禁用光泽度。单选按钮（premium）和checkbox（gloss）在单独的组件中有不同的方法 - 看起来它们都使用状态来发送数据。

这是复选框

  buildCheckbox(item) {
    return (
      <Checkbox
        key={item.key}
        label={item.display}
        name={item.key}
        checked={this.props.order[item.key] || false}
        onChange={checked => this.handleCheck(checked, item.key)}
        disabled={item.disabled(this.props.order)}
      />
    );
  }

使用了手动抓取方法

  handleCheck(checked, key) {
    const { params, updateOrder } = this.props;
    const { sessionId } = params;

    // if doulbeSided option is removed, then clear the inside file.
    if (key === 'doubleSided' && !checked) {
      updateOrder(sessionId, { inside: null });
    }

    // set ink coverage based on printed flag
    if (key === 'printed') {
      const inkCoverage = checked ? 100 : 0;
      updateOrder(sessionId, { inkCoverage });
    }

    // if unprinted, remove doublesided and gloss options
    if (key === 'printed' && !checked) {
      updateOrder(sessionId, { doubleSided: false });
      updateOrder(sessionId, { gloss: false });
    }

    updateOrder(sessionId, { [key]: checked });
  }

单选按钮的方法

  onClick(id, ordAttribute) {
    const { updateOrder, sessionId, validator } = this.props;
    updateOrder(sessionId, { [ordAttribute]: id });

    if (validator) validator(ordAttribute);
  }

我看到光泽有一项服务，通过此处的状态打印键切换是否禁用

gloss: {
  display: 'Gloss Finish',
  key: 'gloss',
  component: 'checkbox',
  disabled: state => !state.printed,
},

我已经考虑过创建第四个单选按钮，只是删除了光泽度选项，但我不确定它的填充位置 - 还想过在通过无线电激活的光泽样式上使用display none按钮 - 但不知道从哪里开始。

刚刚提出了一份新工作，这是以前员工的代码 - 试图解决这个问题。看起来状态是通过此Action方法激活的：

export const updateOrder = (sessionId, payload) => (dispatch, getState) => {
  dispatch(updateAction({ ...payload }));
  const state = getState();
  const ord = getNewOrderForm(state);
  const minOrdValue = getMinOrdValue(state);
  const { length, width, height, style, blankLength, blankWidth, qty, leadTime, sqFeet } = ord;
  const priceMatrix = style ? getPriceMatrix(state)[style.priceMatrix] : null;

  if (priceMatrix && style && style.calcPrice) {
    dispatch(dispatchNewPrice(ord, style, priceMatrix, minOrdValue));
  }

  if (shouldCalcBlank({width, length, height}, style)) {
    calcBlanks(style, {width, length, height})
    .then(blanks => dispatch(updateAction(blanks)))
    .catch(err => console.log('error', err))
  }

  if (blankLength && blankWidth && qty) {
    calcSquareFeet({ blankLength, blankWidth, qty })
      .then(sqFeet => {
        dispatch(updateAction({ sqFeet }));
        return sqFeet;
      })
      .then(sqFeet => sqFeet > 1000)
      .then(lrgSqFeet => {
        dispatch(updateAction({ lrgSqFeet }));
        return lrgSqFeet;
      })
      .then(lrgSqFeet => {
        if (lrgSqFeet && leadTime === 'rush') {
          dispatch(updateAction({ leadTime: 'standard' }));
        }
      });
  }

  if (sqFeet && (!blankLength || !blankWidth || !qty)) {
    dispatch(updateAction({ sqFeet: 0 }));
  }

  localStorage.setItem(sessionId, JSON.stringify(getNewOrderForm(getState())));
};

我想添加一个单选按钮的id为'clearwater'，所以我考虑添加一个bool到这个方法，然后可以作为clearwater访问：false（当onClick被激活时，updateOrder然后将其更改为clearwater ：true，然后服务中的gloss对象将被禁用：state =＆gt;！state.printed＆amp;＆amp;！state.clearwater（这不起作用）：

export const generateNewOrder = (userid, style, sessionId = uuid()) => dispatch => {
  localStorage.setItem(
    sessionId,
    JSON.stringify({
      userid,
      style,
      sessionId,
      blindShip: true,
      inkCoverage: '100',
      printed: true,
    })
  );
  history.push(`/order/new/${style.styleCode}/${sessionId}`);
  dispatch(
    newOrder({
      userid,
      style,
      sessionId,
      blindShip: true,
      inkCoverage: '100',
      printed: true,
    })
  );

  if (style.type === 'static') {
    const { dims, blankLength, blankWidth } = style;
    const payload = {
      ...dims,
      blankLength,
      blankWidth,
    };

    dispatch(updateOrder(sessionId, payload));
  }
};

我希望通过更改附加到复选框的服务，我可以添加一个额外的条件，这将导致禁用的功能依赖于state.boardStyle，但这似乎不起作用（下面的图片不是准确的，我把它改成了boardStyle）：

http://oi65.tinypic.com/wknzls.jpg

这是使用redux - 对redux有点新意 - 如果我遗漏了任何信息，请告诉我 - 我会发布任何内容以解决这个问题。

任何帮助都会很大 - 非常感谢！

Answer 1

我想我想通了。。。

这可能是一种更干燥的方法，但是这里有：

首先我在Actions中的generateNewOrder方法创建了一个新键[bool]（clearwater，设置为false）：

export const generateNewOrder = (userid, style, sessionId = uuid()) => dispatch => {
  localStorage.setItem(
    sessionId,
    JSON.stringify({
      userid,
      style,
      sessionId,
      blindShip: true,
      inkCoverage: '100',
      printed: true,
      clearwater: false,
    })
  );
  history.push(`/order/new/${style.styleCode}/${sessionId}`);
  dispatch(
    newOrder({
      userid,
      style,
      sessionId,
      blindShip: true,
      inkCoverage: '100',
      printed: true,
      clearwater: false
    })
  );

  if (style.type === 'static') {
    const { dims, blankLength, blankWidth } = style;
    const payload = {
      ...dims,
      blankLength,
      blankWidth,
    };

    dispatch(updateOrder(sessionId, payload));
  }
};

这让我可以访问这个状态值，然后我可以在按下单选按钮时在onclick中使用它。如果id是clearwater，bool将被设置为true，否则它被设置为false（仅用于其他两个选项，因为此代码用于其他ID）

  onClick(id, ordAttribute) {
    const { updateOrder, sessionId, validator } = this.props;
    updateOrder(sessionId, { [ordAttribute]: id });

    if (validator) validator(ordAttribute);

    if (id === 'clearwater') {
      updateOrder(sessionId, { clearwater: true });
    } else if (id === 'kraft' || id === 'std_white_two_side'){
      updateOrder(sessionId, { clearwater: false });
    }
  }

然后我需要做的就是将其添加到服务中。如果它没有打印！打印或不清水！clearwater，复选框将被禁用

  const printing = {
    doubleSided: {
      display: 'Two Sided Print',
      key: 'doubleSided',
      component: 'checkbox',
      disabled: state => !state.printed,
    },
    printed: {
      display: 'Printed?',
      key: 'printed',
      component: 'checkbox',
      disabled: () => false,
    },
    gloss: {
      display: 'Gloss Finish',
      key: 'gloss',
      component: 'checkbox',
      disabled: state => !state.printed || !state.clearwater,
    },
  };

Answer 2

我有一个解决类似问题的可行示例，请看看。整个逻辑在redux中完成： Want to uncheck the node of the tree structure in React JS

如何禁用单独组件的复选框和单选按钮？

2 个答案: