将 antd 表数据转换成 hooks

Question

这里是 React 初学者，我目前正在学习 Reactjs，因为大家都说 React hooks 更容易上手，所以我从 hooks 开始，但是到处都是 react 类，在这个例子中（antd table）它是使用类编码的，如果我目前理解的话，我应该把'searchText:'',searchedColumn:'','放到useState中，不需要useEffect？ 因为没有componentdimount或udpate ..？ 只是为了学习想把这个 class 代码改成 Hooks，不好意思，因为英语不是我的母语：

 import React from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { Table, Input, Button, Space } from 'antd'; import Highlighter from 'react-highlight-words'; import { SearchOutlined } from '@ant-design/icons'; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Joe Black', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Jim Green', age: 32, address: 'Sidney No. 1 Lake Park', }, { key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park', }, ]; class App extends React.Component { state = { searchText: '', searchedColumn: '', }; getColumnSearchProps = dataIndex => ({ filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => ( <div style={{ padding: 8 }}> <Input ref={node => { this.searchInput = node; }} placeholder={`Search ${dataIndex}`} value={selectedKeys[0]} onChange={e => setSelectedKeys(e.target.value? [e.target.value]: [])} onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)} style={{ width: 188, marginBottom: 8, display: 'block' }} /> <Space> <Button type="primary" onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)} icon={<SearchOutlined />} size="small" style={{ width: 90 }} > Search </Button> <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}> Reset </Button> <Button type="link" size="small" onClick={() => { confirm({ closeDropdown: false }); this.setState({ searchText: selectedKeys[0], searchedColumn: dataIndex, }); }} > Filter </Button> </Space> </div> ), filterIcon: filtered => <SearchOutlined style={{ color: filtered? '#1890ff': undefined }} />, onFilter: (value, record) => record[dataIndex]? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()): '', onFilterDropdownVisibleChange: visible => { if (visible) { setTimeout(() => this.searchInput.select(), 100); } }, render: text => this.state.searchedColumn === dataIndex? ( <Highlighter highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }} searchWords={[this.state.searchText]} autoEscape textToHighlight={text? text.toString(): ''} /> ): ( text ), }); handleSearch = (selectedKeys, confirm, dataIndex) => { confirm(); this.setState({ searchText: selectedKeys[0], searchedColumn: dataIndex, }); }; handleReset = clearFilters => { clearFilters(); this.setState({ searchText: '' }); }; render() { const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', width: '30%', ...this.getColumnSearchProps('name'), }, { title: 'Age', dataIndex: 'age', key: 'age', width: '20%', ...this.getColumnSearchProps('age'), }, { title: 'Address', dataIndex: 'address', key: 'address', ...this.getColumnSearchProps('address'), }, ]; return <Table columns={columns} dataSource={data} />; } } ReactDOM.render(<App />, document.getElementById('container'));

代码也可以在这里找到： https://codesandbox.io/s/lq2it?file=/package.json

Answer 1

是的， searchText和searchedColumn是状态，应该像这样使用useState声明：

const [searchText, updateSearchText] = useState('default_state');
const [searchedColumn, updateSearchedColumn] = useState('default_state');

updateSearchText(some_value)等价于

this.setState({
searchText : some_value
})

和updateSearchedColumn与上面所说的相同，但对于 state： searchedColumn