【发布时间】：2018-03-30 16:42:23
【问题描述】：
遇到这个 ReactJS（使用 Redux）问题：
如果未选择优质白色，则应禁用光泽饰面。单选按钮（高级）和复选框（光泽）在不同的组件中有不同的方法——看起来它们都使用状态来发送数据。
这是复选框
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)}
/>
);
}
以及使用的handleclick方法
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 有一项服务，该服务通过此处的状态打印键切换是否已禁用
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，然后服务中的光泽对象将检查禁用： state => !state.printed && !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 来说是一种新的东西——如果我遗漏了任何信息，请告诉我——我会发布任何东西来解决这个问题。
任何帮助都会很大——非常感谢！
【问题讨论】：
-
Premium White 单选按钮的 id 为“clearwater”，我可以访问 - 并且光泽有一个我可以访问的光泽键 - 我需要将此信息传递给另一个通过状态组件？
-
这条线对我来说似乎很可疑：
disabled: state => !state.printed被调用disabled={item.disabled(this.props.order)。this.props.order.printed存在吗？我知道它在那里说“状态”，但这不是传入的内容。此时您只是使用“状态”作为参数名称。 -
是的，我正试图弄清楚它是从哪里拉出来的——它是在全局状态下设置的吗？我一直在寻找状态声明，但我能找到的只是参考。看起来 Map 正在用于映射项目——我不确定信息是如何填充的——（我找到了一个 mockData 文件，但它可能是通过 firebase 填充的？）
-
正在考虑复习我的 reactJS 课程，但我真的希望我可以问另一个开发人员（我是这家公司唯一的开发人员）
-
如果另一个状态变量也为假，是否有办法添加到该订单服务代码以禁用它？ （这就是我采取的方法）
标签： javascript reactjs react-redux