数据状态

https://www.jianshu.com/p/a6a59b1e8610

组件调用

https://blog.csdn.net/weixin_42738354/article/details/116934904

input更新

https://www.yisu.com/zixun/174413.html

import React, { useEffect, useState } from 'react';
import styles from './style.scss';
import { useSelector, useDispatch } from 'react-redux';
import { history } from '@/router';
import KeyValueEntity from './data';
import IconNoData from '../icon-no-data/index';

interface Props {
  visible?: boolean;
  title?: string;
  onSelected: (item, index) => void;
  onConfirm: (item, index) => void;
  onCancel?: () => void;
  data: SelectVenueEntity;
}

export default class SelectVenue extends React.Component<Props> {
  //父组件变更，子组件重新渲染
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data
    };
  }
  //父组件变更，子组件重新渲染
  componentWillReceiveProps(nextProps) {
    this.setState({ data: nextProps.data });
  }
  // 设置要变更的状态
  state = {
    data: this.props.data
  }

  // 改变数据传递给父组件
  handleChange = (item, index) => {
    var dataT = Object.assign({}, this.state.data);
    dataT.data.map((itemT, i) => {
      itemT.checked = false;
    });
    dataT.data[index].checked = true;
    dataT.selectIndex = index;
    this.setState({
      data: dataT
    });
    //传递选中的数据给父组件
    this.props.onSelected(dataT.data[index], index);
  }

  render() {
    const {
      visible,
      title,
      onConfirm,
      onCancel,
      onSelected } = this.props;

    const { data } = this.state;



    if (visible) {
      return (
        <DialogContent visible={visible} >
          <div className={styles.dialogBox}>
            <div className={styles.dialogHeader}>
              <div className={styles.cancel} onClick={onCancel}>取消</div>
              <div className={styles.confirm} onClick={() => {
                onConfirm(((data || {}).data || []).length > 0 ? data.data[data.selectIndex.toString()] : null, data.selectIndex)
              }}>完成</div>
            </div>
            <div className={styles.dialogContent}>

              {helpers.isJudge(((data || {}).data || []).length > 0)(
                <React.Fragment>
                  {
                    data.data.map((item, index) => {
                      return (
                        <div onClick={() => { this.handleChange(item, index) }} key={index} className={`${styles.item} ${item.checked === true ? styles.selected : ''}`}>{item.name}</div>
                      )
                    })
                  }
                </React.Fragment>
                , <IconNoData visible={true} title={'没有记录'}></IconNoData>)}
            </div>
          </div>
        </DialogContent>
      );
    } else {
      return null;
    }
  }
}