关于react antd 双向数据绑定Select组件渲染问题

时间: 2019-10-27 11:38:57     标签: antdesign  react.js     

双向数据绑定后，select变化都会触发table表格重新渲染，如何避免这个问题？
见代码https://codesandbox.io/s/epic-colden-oi3eu

{/*代码1*/}
{/* {getFieldDecorator('gender', {
  initialValue:"female",
  rules: [{ required: true, message: 'Please select your gender!' }],

})(
  ,
)} */}

 {/*代码2*/}
,

说明：代码1使用了双向数据绑定，当select变化时会自动渲染，控制台会输出两次“table表格被触发了”，如果使用代码2改变select时不会输出“table表格被触发了”。
问题：我现在需要再table里获取到gender的值，但不想表格被重新渲染！如果还是使用双向数据绑定该如何修改代码？如果不使用双向数据绑定该如何获取到gender的值，麻烦给出代码。

最佳答案

首先纠正的是, React没有双向绑定的概念, 这样只是受控表单.
再就是使用HOOK重写, 因为React类中比较复合类型数据很难.

import React, { useMemo } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Select, Input, Button, Card, Table } from 'antd';

const { Option } = Select;

const App = props => {
  const handleSubmit = e => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  const handleSelectChange = value => {
    console.log(value);
    props.form.setFieldsValue({
      note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`
    });
  };

  const { getFieldDecorator, getFieldValue } = props.form;
  const dataSource = useMemo(
    () => [
      {
        key: '1',
        name: '女',
        age: 32,
        address: '西湖区湖底公园1号'
      },
      {
        key: '2',
        name: '男',
        age: 42,
        address: '西湖区湖底公园1号'
      }
    ],
    []
  );
  const columns = useMemo(
    () => [
      {
        title: '性别',
        dataIndex: 'name',
        key: 'name',
        render: text => {
          console.log('table表格被触发了');
          return (
            // {getFieldValue('gender')}
            {text}
          );
        }
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age'
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address'
      }
    ],
    []
  );
  return (
    
      

        
          {getFieldDecorator('note', {
            rules: [{ required: true, message: 'Please input your note!' }]
          })()}
        
        
          {getFieldDecorator('gender', {
            initialValue: 'female',
            rules: [{ required: true, message: 'Please select your gender!' }]
          })(
            
          )}
        
        
          
        
      


      
    
  );
};

const MyTable = React.memo(props => );

const WrappedApp = Form.create({ name: 'coordinated' })(App);

ReactDOM.render(, document.getElementById('container'));