Как манипулировать данными в реакции - PullRequest
Новая
       11

Как манипулировать данными в реакции

0 голосов
/ 26 мая 2018

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

get valuations() {
    var arr = this.props.valuation;
    var valArray = [];
    for (var i = 0; i < arr.length; i++) {
      valArray.push({
        date: arr[i].registered_date,
        name: arr[i].full_name,
        year: arr[i].year
      });
    }
    return valArray;
  }

render(){
  const columns = [
    {
      title: "Date",
      dataIndex: "date",
      },
    {
      title: "Name",
      dataIndex: "name",
    },
    {
      title: "Year",
      dataIndex: "year"
    },
  ];

  return(
    <Table
      columns={columns}
      dataSource={this.valuations}
    />
  )
}

Итак, я получаю данные из таблицы, но хочу добавить пользовательский фильтр.Так что мне нужно поиграть с valArray.Моя проблема в том, как мне использовать массив, возвращенный из функций оценки.Я знаю, как фильтровать массив, но я просто не знаю, как использовать массив вне его функции.

Я пытался установить новое состояние с данными, но это не сработало.

1 Ответ

0 голосов
/ 26 мая 2018

Вам нужно манипулировать this.valuations.Создайте поле ввода или другой элемент, чтобы получить значение фильтра: -

позволяет здесь фильтровать ваш атрибут имени:

Теперь 

componentDidMount = () => {
    this.valuations();
}

valuations = () => {
    // set state instead of return here you can optimize your code using filter method here
    this.setState({data: valArray})
}

nameFilterHandler = (inputValue) => {
    const {valuation} = this.props;

    //Edited Here.
    valuation.filter((data) => {
        data.name = data.full_name,
        data.date = data.registered_date,
        return date.full_name && data.full_name.match(this.state.inputValue)
    })

    this.setState({data: valuation});
}

return(
    <Table
        columns={columns}
        dataSource={this.state.data}
    />
)

Попробуйте и подумайте обо всех фильтрахи создайте общий метод для всех.

...