In antd-mobile, single selection cannot be realized after placing the selection group Selector under Form.Item

background

After the Form.Item in antd-mobile is put into the selection group Selector, multiple selection is no problem, and it is not necessary to select;

<Form.Item name='favoriteFruits' label='喜爱的水果'>
  <Selector
    columns={
    
    3}
    multiple
    options={
    
    [
      {
    
     label: '苹果', value: 'apple' },
      {
    
     label: '橘子', value: 'orange' },
      {
    
     label: '香蕉', value: 'banana' },
    ]}
  />
</Form.Item>	

The Selector component exemplifies the case of only one selection. In the onChange event, it is judged that if the current selection is empty, no operation can be performed to achieve single selection.

 <Selector
      options={options}
      value={[value]}
      onChange={v => {
        if (v.length) {
          setValue(v[0])
        }
      }}
/>

need

Put the selection group in the Item of the Form form, but realize the interactive effect of single selection.

question

After combining the above two situations according to the requirements, a miracle happens: the selected button will be canceled if it is clicked again.

solve

After trying, the solution is as follows:

1. Remove the name attribute of the current Form.Item;
2. Put an empty selection group after the current Selector;
   <Selector options={[]} />
3. Use a radio button, and then change the UI to look like a select group.

Please choose according to the actual situation.