Реагируйте на собственные функции привязки поверх .map () - PullRequest
Новая
       11

Реагируйте на собственные функции привязки поверх .map ()

0 голосов
/ 28 августа 2018

Так что у меня возникли некоторые проблемы при объединении концепций .map () и привязки функций. Я использую .map () таким же образом, как и в ngFor, чтобы разместить пользовательский компонент кнопки на странице для каждого элемента в учетной записи пользователя.

Вот пример кода: 

class MyButton extends Component {
  constructor(props) {
    super();
    this.state = {
      progress: 0
    }
  }

  render() {
    return(
      <TouchableWithoutFeedback onPress={this.pressFunction}>
        (...more code inside)
      </TouchableWithoutFeedback>
    )
  }

  pressFunction = () => {
    (animate progress from 0 to 1 for some animation)
  }
}

/////////////////////////////////////////////////////////////////

class Parent extends Component {
  render() {
    return(
      {
        this.props.data.array.map(obj => {
          return(
            <View style={someStyle}>
              <MyButton data={obj} />
            </View>
          )
        })
      }
    )
  }
}

Таким образом, в родительском компоненте несколько MyButton отображаются правильно, каждый в соответствии с переданным объектом из массива. Однако при нажатии любой кнопки запускаются все функции нажатия для всех кнопок MyButton.

У меня вопрос, наверное, как мне обеспечить, чтобы каждая функция нажатия каждой кнопки MyButton была связана только с конкретным экземпляром кнопки MyButton? У меня возникли проблемы с областью применения.

Насколько я понимаю, 

functionName = () => {}

должен правильно связать функцию с экземпляром, но я попробовал и более старые способы с тем же результатом.

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Я решил эту проблему, создав динамический ref для каждого объекта, сопоставленного с MyButton, используя уникальное свойство каждого объекта в массиве: 

this.props.data.array.map(obj => {
  return(
    <View style={someStyle}>
      <MyButton ref={obj.name} data={obj} />
    </View>
  )
})

До сих пор не знаю, почему это не было однозначно без ссылки

0 голосов
/ 29 августа 2018

Вы должны передать прессу в качестве реквизита. Ниже обновленный код 

class MyButton extends Component {
  constructor(props) {
    super();
    this.state = {
      progress: 0
    }
  }

  render() {
    return(
      <TouchableWithoutFeedback onPress={this.props.onPress}>
        (...more code inside)
      </TouchableWithoutFeedback>
    )
  }
}

/////////////////////////////////////////////////////////////////

class Parent extends Component {
  pressFunction = () => {
    (animate progress from 0 to 1 for some animation)
  }
  render() {
    return this.props.data.array.map(obj => {
      return(
        <View style={someStyle}>
          <MyButton 
            data={obj} 
            onPress={this.pressFunction}
          />
        </View>
      )
    })
  }
}
...