Question

我有一个像这样的检查清单

<label><input type="checkbox" value="Apples" checked={this.props.fruits} onChange={this.fruitClickHandler.bind(this)} />Apples</label>
<label><input type="checkbox" value="Bananas" checked={this.props.fruits} onChange={this.fruitClickHandler.bind(this)} />Bananas</label>
<label><input type="checkbox" value="Oranges" checked={this.props.fruits} onChange={this.fruitClickHandler.bind(this)} />Oranges</label>

我想要做的是点击这些时更新查询字符串及相关信息。

更新查询字符串是在父组件中完成的，所以我在这里所做的就是使用事件处理程序向上发送信息

     fruitClickHandler = (event) => {
        log.debug('Fruit - fruitClickHandler(): ', event);
        log.debug('Fruit - fruitClickHandler(): target.checked', event.target.checked);
        if (event.target.checked) {
            this.props.updateHandler({fruit: event.target.value})
        }
        else {
            this.props.updateHandler({fruit: undefined})
        }
    }

这有效，但有问题...

我正在使用'defaultValue'来勾选复选框，如果在查询字符串中选中它，我已经使用下拉列表或单个输入就可以了......但是现在尝试使用'group'来执行此操作复选框输入我的问题是，当你选择一个复选框时，它会全部选择

问题在于这一点

checked={this.props.fruits}

它正在做的事情告诉我需要的是像

checked={this.props.fruits == "apples" : checked}

但这并不觉得React并不认为这可能是我应该采取的方式

我的问题是在React的世界中这是我应该尝试实现的方式吗？

我希望我的问题清楚，如果我需要提供更多细节或更好地解释一下，请告诉我

使用React JS根据查询字符串信息更改已检查/未检查的反应清单

0 个答案: