Как получить доступ к свойствам настраиваемых элементов списка в Ioni c React? - PullRequest
Новая
       7

Как получить доступ к свойствам настраиваемых элементов списка в Ioni c React?

0 голосов
/ 11 июля 2020

Я пытаюсь создать собственный список в Ioni c, похожий на этот: https://medium.com/@benchedms / how-to-make-a-to-do-app-with-ioni c -react -d92ece061284 , но с каждым элементом в списке, содержащим Ioni c Range и Input. Прямо сейчас я могу добавлять и удалять элементы списка, но я не уверен, как получить доступ к значениям диапазонов и входов после создания списка. Элемент списка определяется следующим образом в ListItem.tsx: 

export const TaskListItem: FunctionComponent<Props> = ({ task, onDelete }) => {
  const onClick = () => {
    onDelete(task);
  };
  const [tempo, setTempo] = useState(0);
  return (
    <IonList>
      <IonGrid>
        <IonRow>
          <IonCol>
            Tempo: {tempo}
          </IonCol>
          <IonCol>
            <IonRange min={40} max={200} pin={true} value={tempo} onIonChange={e => setTempo(e.detail.value as number)}/>
          </IonCol>
          <IonCol>
            <IonInput placeholder="Measure number" ></IonInput>
          </IonCol>
          <IonCol>
            <IonIcon className="floatButton paddingRightDelete" name="close" onClick={onClick}/>
          </IonCol>
        </IonRow>
        <IonItemDivider/>
      </IonGrid>
    </IonList>
  );
};

И список создается следующим образом в файле с именем Home.tsx: 

<TasksList tasks={this.state.tasks} onDelete={this.deleteTask} />

Я пытаюсь получить доступ значения диапазона внутри каждого элемента в задачах. Любые указания будут оценены!

1 Ответ

0 голосов
/ 11 июля 2020

Решено, мне просто пришлось изменить setTempo, чтобы изменить переменную-член задачи в ListItem.tsx, а затем получить доступ к этой переменной позже.

...