Выбор значения метки переключателя в реагировать родной - PullRequest
Новая
       44

Выбор значения метки переключателя в реагировать родной

1 голос
/ 06 ноября 2019

Я хочу добиться функциональности флажка с переключателем в реагировать-нативный , так как флажок не поддерживается в устройствах ios . Я не понимаю, как я могу получить значение метки, связанное с конкретным переключателем . Итак, идея в том, что у меня есть несколько вариантов, скажем, A, B, C, и каждый связан с switch , и есть кнопка submit . При нажатии submit Я хочу получить метки тех опций, которые включены.

Это код для выбора различных опций, каждый из которых связан с переключателем, 

       <Text>A</Text>
       <Switch
           onValueChange = {this.handleToggle}
           value = {toggleValue}
       />
       <Text>B</Text>
       <Switch
           onValueChange = {this.handleToggle}
           value = {toggleValue}
       />
       <Text>C</Text>
       <Switch
           onValueChange = {this.handleToggle}
           value = {toggleValue}
       />

И вот код handleToggle, 

handleToggle = event => {
    this.setState(state => ({
        toggleValue: !state.toggleValue
    }));
}

Большое спасибо.

1 Ответ

1 голос
/ 06 ноября 2019

Вы используете одну и ту же функцию для разных переключателей, щелкнув по одному из них, вы не получите доступ к ярлыку этого конкретного переключателя. Для этого я бы предложил построить его так. Это может быть рабочее решение:

Начиная с массива, который выглядит следующим образом: 

this.state = {
   data = [
      {
       label: "firstSwitch",
       checked: false,
      },
      {
       label: "secondSwitch",
       checked: false,
      }
   ]
}

Затем в вашем рендере: 

this.state.data.map((item, index) => <Fragment>
      <Text>{item.label}</Text>
      <Switch 
      onValueChange = {() => this.handleToggle(index)}
      />
   </Fragment>
)

handleToggle будетобновить массив в позиции, переданной в качестве аргумента: 

handleToggle = index => {
   let tempArr= this.state.data
   tempArr[index].checked = !tempArr[index].checked
   this.setState({data:tempArr})
}

Затем кнопка подтверждения проверит наличие проверенных переключателей: 

onSubmit = () => {
   let arrOfCheckedSwitches= []
   this.state.data.forEach (item => item.checked && arrOfCheckedSwitches.push(item.label))
   console.log("array of labels :", arrOfCheckedSwitches)
}

Дайте мне знать, если что-то неясно

...