Получить динамически созданные данные таблицы в строке React - PullRequest
Новая
       7

Получить динамически созданные данные таблицы в строке React

0 голосов
/ 10 октября 2018

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

import React, { Component } from 'react';
import axios from 'axios';
import Suggestions from './Suggestions';

// API url
const API_URL = 'http://localhost:3000/api/file_infos'

class Search extends Component {
  state = {
    query: '',
    results: []
  }
  getCount = () => {
    axios.get(`${API_URL}count?filter[where][id][regexp]=/${this.state.query}/i`)
      .then(count => {
        this.setState({
          results: count.data
        })
      })
  }

  // query loop back API for matching queries base on text input
  getInfo = () => {
    axios.get(`${API_URL}?filter[where][id][regexp]=/${this.state.query}/i&filter[limit]=20`)
      .then(response => {
        this.setState({
          results: response.data
        })
      })
  }
  // check to see if input on the search bar has changed and update the search query accordingly 
  handleInputChange = () => {
    this.setState({
      query: this.search.value
    }, () => {
      if (this.state.query && this.state.query.length > 1) {
        if (this.state.query) {
          this.getInfo()
        }
      } else if (!this.state.query) {
      }
    })
  }
  // render form and pass results back to the home component 
  render() {
    return (
      <div>
      <form>
        <input
          placeholder="Search for..."
          ref={input => this.search = input}
          onChange={this.handleInputChange}
        />

      </form>

      <Suggestions results={this.state.results} />
      </div>
    )
  }
}

export default Search

Второй модуль - это модуль предложений, который отображает вывод в формате таблицы.

Следующая часть приложения, которое я создаю, откроет файл на основе строки таблицы, которую выбрал пользователь.Я хочу, чтобы данные таблицы возвращались в функцию, чтобы я мог отправить HTTP-запрос на мой API, который, в свою очередь, откроет файл с помощью модуля NodeJS.

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

Ниже приведено то, что у меня сейчас есть: 

import React from 'react';
// return results in a table format based on the text input entered 
 const Suggestions = (props) => {

   const state = {
        results: []
    }

    const handleFormOpen = () => {
        this.setState({
            results: this.results.value
        },
        console.log(this.state.results)
        )
    }

    const options = props.results.map(r => (
        <tr key={r.id} ref={tr => this.results = tr} onClick={handleFormOpen.bind(this)}>
            <td>{r.id}</td>
            <td>{r.OriginalPath}</td>
            <td>{r.CreateDate}</td>
            <td>{r.AccessDate}</td>
            <td>{r.WriteDate}</td>
            <td><i className="fas fa-book-open"></i></td>
        </tr>
    ))
    return <table className="striped responsive-table">
        <thead>
            <tr>
                <th>File Name</th>
                <th>Parent Directory</th>
                <th>Creation Date</th>
                <th>Access Date</th>
                <th>Write Date</th>
                <th>Open File</th>
            </tr>
        </thead>
        <tbody>
            {options}
        </tbody>
    </table>
}

export default Suggestions;

На данный момент я действительно не уверен, пытаюсь ли я решить эту проблему правильным образом.Я думаю, что, возможно, компонент с предложениями, возможно, придется превратить в полноценный компонент, расширяющий класс, но на данный момент я совершенно растерялся.Может ли кто-нибудь, пожалуйста, указать на мою глупость и заставить меня двигаться в правильном направлении?

ОБНОВЛЕНИЕ

В соответствии с просьбой в комментариях, здесь есть журнал ошибок из моего браузера:

Suggestions.js:10 Uncaught TypeError: Cannot read property 'results' of undefined
    at Object.handleFormOpen (Suggestions.js:10)
    at HTMLUnknownElement.callCallback (react-dom.development.js:145)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:195)
    at invokeGuardedCallback (react-dom.development.js:248)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:262)
    at executeDispatch (react-dom.development.js:593)
    at executeDispatchesInOrder (react-dom.development.js:615)
    at executeDispatchesAndRelease (react-dom.development.js:713)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:724)
    at forEachAccumulated (react-dom.development.js:694)
    at runEventsInBatch (react-dom.development.js:855)
    at runExtractedEventsInBatch (react-dom.development.js:864)
    at handleTopLevel (react-dom.development.js:4857)
    at batchedUpdates$1 (react-dom.development.js:17498)
    at batchedUpdates (react-dom.development.js:2189)
    at dispatchEvent (react-dom.development.js:4936)
    at interactiveUpdates$1 (react-dom.development.js:17553)
    at interactiveUpdates (react-dom.development.js:2208)
    at dispatchInteractiveEvent (react-dom.development.js:4913)

Ответы [ 2 ]

0 голосов
/ 10 октября 2018

Первое, так как ваш Suggestions компонент играет с состоянием, я бы порекомендовал вам перейти с компонентом statefull.

Stateless component предназначен для получения реквизита и возврата jsx-элементов, не будет никаких мутаций состояния.в компоненте без гражданства.Это называется pure function in javascript.Надеюсь, это проясняется.

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

Исправлено PFB Suggestions код компонента 

import React, { Component } from 'react';
// return results in a table format based on the text input entered 
 export default class Suggestions extends Component {
  constructor(props){
    super(props);
    this.state = {
      results: [],
      value: ""
    }
  }


  handleFormOpen = (path, id) => {
    console.log("id", id, path);//like wise pass value to this function in .map and get the value here
      this.setState({
          value: id
      });
  }


    render(){ 
      const { results } = this.props;
      return (<div>
        <table className="striped responsive-table">
          <thead>
              <tr>
                  <th>File Name</th>
                  <th>Parent Directory</th>
                  <th>Creation Date</th>
                  <th>Access Date</th>
                  <th>Write Date</th>
                  <th>Open File</th>
              </tr>
          </thead>
          <tbody>
              {Array.isArray(results) && results.length > 0 && results.map(r => (
                <tr key={r.id} ref={tr => this.results = tr} onClick={() => this.handleFormOpen(r.OriginalPath, r.id)}>
                    <td>{r.id}</td>
                    <td>{r.OriginalPath}</td>
                    <td>{r.CreateDate}</td>
                    <td>{r.AccessDate}</td>
                    <td>{r.WriteDate}</td>
                    <td><i className="fas fa-book-open"></i></td>
                </tr>
              ))}
          </tbody>
        </table>
      </div>)
    }    
}

export default Suggestions;
0 голосов
/ 10 октября 2018

Вы используете состояния в функциональном компоненте, вам нужно использовать React Component 

import React from 'react';
// return results in a table format based on the text input entered 
 class Suggestions extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       results: [],
     }
   }


    handleFormOpen = () => {
      this.setState({
          results: this.results.value
      },
      console.log(this.state.results)
      )
    }

    render () {
      const options = this.props.results.map(r => (
          <tr key={r.id} ref={tr => this.results = tr} onClick={handleFormOpen.bind(this)}>
              <td>{r.id}</td>
              <td>{r.OriginalPath}</td>
              <td>{r.CreateDate}</td>
              <td>{r.AccessDate}</td>
              <td>{r.WriteDate}</td>
              <td><i className="fas fa-book-open"></i></td>
          </tr>
      ))
      return (
        <table className="striped responsive-table">
            <thead>
                <tr>
                    <th>File Name</th>
                    <th>Parent Directory</th>
                    <th>Creation Date</th>
                    <th>Access Date</th>
                    <th>Write Date</th>
                    <th>Open File</th>
                </tr>
            </thead>
            <tbody>
                {options}
            </tbody>
        </table>
      )
    }
}

export default Suggestions;
...