Question

我想创建一个列表框，可以从中选择带有复选框的元素。它通过数据绑定从数据库获取元素。这些项目显示在“列表框”中，但是当我发送表单时，后台代码没有收到SelectedItem值。

列表框的XAML部分如下所示：

var IngredientsControl = createClass({
    getDefaultProps: function () {
        return {
            value: new Map()
        };
    },

    addElement: function (e) {
        var value = this.props.value;
        value.set("id", "Description");

        //is.props.onChange(value);
        this.props.onChange(new Map(value));
    },

    handleIdChange: function (oldId, newId) {
        console.log(oldId, newId);
        var value = this.props.value;
        var description = value.get(oldId);
        value.delete(oldId);
        value.set(newId, description);

        //this.props.onChange(value);
        this.props.onChange(new Map(value));
    },

    handleDescriptionChange: function (id, description) {
        console.log(id, description);
        var value = this.props.value;
        value.set(id.toLowerCase(), description);

        //this.props.onChange(value);
        this.props.onChange(new Map(value));
    },

    render: function () {
        var value = this.props.value;

        var handleIdChange = this.handleIdChange;
        var handleDescriptionChange = this.handleDescriptionChange;

        var items = [];
        for (var [id, description] of value) {
            var li = h('li', {},
                h('input', { type: 'text', value: id, onChange: function (e) { handleIdChange(id, e.target.value); } }),
                h('input', { type: 'text', value: description, onChange: function (e) { handleDescriptionChange(id, e.target.value); } })
            );
            items.push(li);
        }

        return h('div', { className: this.props.classNameWrapper },
            h('input', {
                type: 'button',
                value: "Add element",
                onClick: this.addElement
            }),
            h('ul', {}, items)
        )
    }
});

var IngredientsPreview = createClass({
    render: function () {
        var value = this.props.value;
        var items = [];
        for (var [id, description] of value) {
            var li = h('li', {},
                h('span', {}, id),
                h('span', {}, ": "),
                h('span', {}, description)
            );
            items.push(li);
        }

        return h('ul', {}, items);
    }
});

CMS.registerWidget('ingredients', IngredientsControl, IngredientsPreview);

出于测试目的，将显示所选项目的代码如下：

<Grid x:Name="grMozik" Visibility="Visible" Margin="0,0,0,0" DataContext="{Binding}" Grid.Row="3" Grid.ColumnSpan="2">
    <ListBox Name="lbMozik" Margin="15" Width="300" Height="200" ItemsSource="{Binding}">
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Focusable" Value="False"/>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <CheckBox Content="{Binding MoziNeve}" />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

Answer 1

ListBox.SelectedItem来自具有ListBoxItem属性设置为IsSelected的{{1}}。如果要通过CheckBox进行选择，则将它们各自绑定到所有者true：

ListBoxItem.IsSelected

ListBox清单SelectedItem返回null

1 个答案: