Как сделать динамический флажок в react native

#react-native

Вопрос:

Я создаю приложение react native, в котором мне нужно установить флажок во время выполнения.Я имею в виду, что с сервера я получу объект json, который будет иметь идентификатор и метку для флажка.Теперь я хочу знать, что после извлечения данных с сервера, как я могу установить флажок, также как я могу обработать флажок, я имею в виду, что сколько бы там ни было флажков, оно не будет статичным, так как я могу объявить переменные состояния, которые могут обрабатывать флажок.Также как я могу обработать событие onPress для флажка.Пожалуйста, предоставьте мне некоторую помощь в коде.Заранее спасибо

1. Можете ли вы поделиться кодом своего компонента?

2. Извините, что сообщаю вам, но я до сих пор не закодировал этот компонент. Вы можете объяснить мне концепцию, я могу применить ее в react native

Ответ №1:

Концепция будет заключаться в использовании массива в состоянии и установке массива состояний с данными, полученными из ответа службы, флажок недоступен на обеих платформах, поэтому вам придется использовать react-native-elements. И вы можете использовать функцию map для отображения флажков из массива и нажать onPress, чтобы соответствующим образом изменить состояние. Код будет таким, как показано ниже. Вам также придется подумать о сохранении значения checked в состоянии.

 import React, { Component } from 'react';
import { View } from 'react-native';
import { CheckBox } from 'react-native-elements';

export default class Sample extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [
                { id: 1, key: 'test1', checked: false },
                { id: 2, key: 'test1', checked: true }
            ]
        };
    }

    onCheckChanged(id) {
        const data = this.state.data;

        const index = data.findIndex(x => x.id === id);
        data[index].checked = !data[index].checked;
        this.setState(data);
    }

    render() {
        return (<View>
            {
                this.state.data.map((item,key) => <CheckBox title={item.key} key={key}  checked={item.checked} onPress={()=>this.onCheckChanged(item.id)}/>)
            }
        </View>)
    }
}

1. Могу ли я узнать, как вы сможете управлять состоянием здесь? Поскольку может быть N количество флажков

2. onCheckChanged получает идентификатор и обновляет состояние, пока у вас есть ключ, он будет работать нормально, другой вариант — использовать индекс, учитывая, что индекс всегда один и тот же

3. Хорошо! Как можно обойти, если нам нужно привязать флажок к вводу текста?

4. По мере обновления состояния вы можете использовать значение, я не понял вашего вопроса

Ответ №2:

Вот пример того, как вы можете это сделать. Вы можете поиграть с кодом, чтобы лучше понять, как это работает.

 export default class App extends React.Component {
  state = {
    checkboxes: [],
  };

  async componentDidMount() {
    // mocking a datafetch
    setTimeout(() => {
      // mock data
      const data = [{ id: 1, label: 'first' }, { id: 2, label: 'second' }];
      this.setState({
        checkboxes: data.map(x => {
          x['value'] = false;
          return x;
        }),
      });
    }, 1000);
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          {JSON.stringify(this.state)}
        </Text>
        {this.state.checkboxes.length > 0 amp;amp;
          this.state.checkboxes.map(checkbox => (
            <View>
              <Text>{checkbox.label}</Text>
              <CheckBox
                onValueChange={value =>
                  this.setState(state => {
                    const index = state.checkboxes.findIndex(
                      x => x.id === checkbox.id
                    );
                    return {
                      checkboxes: [
                        ...state.checkboxes.slice(0, index),
                        { id: checkbox.id, label: checkbox.label, value },
                        ...state.checkboxes.slice(index 1),
                      ],
                    };
                  })
                }
                value={checkbox.value}
                key={checkbox.id}
              />
            </View>
          ))}
      </View>
    );
  }
}