主页 / 问题 / 799261
Accepted
elossa
Asked:2020-03-16 23:27:50 +0000 UTC2020-03-16 23:27:50 +0000 UTC

React - 处理更改并将数据发送到服务器

  • 772

我在做一个项目时遇到了一个问题。通常，我通过 API 接收 JSON 数据并将数据显示在表格中。该表具有可以更改的字段（数字）。

需要确保在输入数据后，通过API将信息发送到服务器。一切都在那里处理，计算一些数据，然后我需要再次从服务器获取所有数据。

当然输入有一个onChange选项，但是我不想每次输入一个字符，又接收到一堆数据都向服务器发送请求，这样会拖慢工作（人输入了5个字符- 这是具有相当大数据的 5 个请求和 5 个响应）。

我的组件示例：

class Table extends React.Component {
    handleOnChange(){ ... }
    render() {
        const data = this.props.data;
        return (
            <table>
                ...
                <tbody>
                    {data.map(item => (
                        <tr>
                            <td>{item.id}</td>
                            <td>
                                <input 
                                    type="text" 
                                    placeholder={item.count} 
                                    onChange={() => this.handleOnChange()}
                                />
                            </td>
                        </tr>
                    )}
                </tbody>
            </table>
        )
    }
}

如何提出想法？我试图创建一个新组件并在那里处理事件并通过 setTimeout 发送数据，但我不明白如何从TableTr调用TableTr函数并将参数传递给它（输入值）。Refs 不能用，看来，TableTr 组件会很多。

javascript

1 个回答

  1. Best Answer

    洛达什来救援。功能{去抖动，油门}。

    import React, { Component } from 'react'
import { debounce, throttle } from 'lodash'

class Table extends Component {
  constructor(props) {
    super(props)
    this.state = {
        editingItem: {},
        data: [],
    }
}
delayedСall = debounce((value, item) => { // отложеный вызов на 500ms
    //this.fetchApi() !!!!
    console.log(value)
}, 500)
delayedCutСall = throttle((value, item) => { // вызов раз в 500ms
    //this.fetchApi() !!!!
    console.log(value)
}, 500)
handleOnFocus = (item) => {
    this.setState({ editingItem: item })
}
handleOnChange = (e, item) => {
    const { value } = e.target
    this.setState({ editingItem: { ...this.state.editingItem, value } })
    this.delayedСall(value, item)
    this.delayedCutСall(value, item)
}
handleOnBlur = () => {
    this.setState({
        data: this.state.data.map(i => (i.id === 
        this.state.editingItem.id ? this.state.editingItem : i)),
    })
}
render() {
    const { data, editingItem } = this.state;
    return (
        <table>
            <tbody>
                {data.map(item => (
                    <tr key={item.id}>
                        <td>{item.id}</td>
                        <td>
                            <input
                                type="text"
                                placeholder={item.count}
                                value={item.id === editingItem.id ? editingItem.value : item.value}
                                onChange={(e) => { this.handleOnChange(e, item) }}
                                onFocus={(e) => { this.handleOnFocus(item) }}
                                onBlur={this.handleOnBlur}
                            />
                        </td>
                    </tr>
                ))}
            </tbody>
        </table>
    )
}
}

    一个有用的例子 注意：如有必要，应将输入移至单独的组件，以便 onChange 不会及时呈现整个表格。

    如果您使用的是 Redux，我建议您查看Redux-Saga，其中也实现了这些功能。

    • 1

相关问题