Question

我有树形结构。我需要的是在选中树的情人级别时取消选中它的情人级别。

但是，如上所述，它不起作用。我现在所拥有的如下图所示

我点击了TPL
点击事故报告（39） 3在这段时间内取消选中TPL

代码：

onCheck(checkedKeys) {
    const {
      FilterTaskList
    } = this.props;
    console.log(checkedKeys);
    var checked2 = [];
    if (checkedKeys.checked.length != 0) {
      var addedkey = checkedKeys.checked[checkedKeys.checked.length - 1];
      checked2 = _.filter(checkedKeys.checked, (o) => o.substring(0, addedkey.length + 1) != addedkey + "-");
    }

    checkedKeys.checked = checked2;
    this.setState({
      checkedKeys,
      ischecked: true
    });
    let selectedLevel = 0;
    let leveldata = [];
    var checked = checkedKeys.checked;
    const data = [];
    const dataremove = [];
    const AllLevel = [];

    checked && checked.forEach((value) => {

          var keys = value.split("-");
          var task;
          if (keys.length == 1) {
            task = FilterTaskList[keys[0]];
            data.push({
              'TID': task.TID,
              'TeamID': this.props.TeamId,
              'RefID': task.REfID,
              'FinClass': '',
              'TLID': task.TLID,
              'SelectionLevel': 2,
              'SubTeamID': task.STID,
              'Type': task.Type
            });
            AllLevel.push(2);
          }
          if (keys.length == 2) {
            task = FilterTaskList[keys[0]].Chidrens[keys[1]];
            data.push({
              'TID': task.TID,
              'TeamID': this.props.TeamId,
              'RefID': task.REfID,
              'FinClass': task.FinClass,
              'TLID': task.TLID,
              'SelectionLevel': 3,
              'SubTeamID': task.STID,
              'Type': task.Type
            });
            AllLevel.push(3);
          }
          if (keys.length == 3) {
            task = FilterTaskList[keys[0]].Chidrens[keys[1]].Chidrens[keys[2]];
            data.push({
              'TID': task.TID,
              'TeamID': this.props.TeamId,
              'RefID': task.REfID,
              'FinClass': task.FinClass,
              'TLID': task.TLID,
              'SelectionLevel': 4,
              'SubTeamID': task.STID,
              'Type': task.Type
            });
            AllLevel.push(4);
          }
          if (keys.length == 4) {
            task = FilterTaskList[keys[0]].Chidrens[keys[1]].Chidrens[keys[2]].Chidrens[keys[3]];
            data.push({
              'TID': task.TID,
              'TeamID': this.props.TeamId,
              'RefID': task.REfID,
              'FinClass': task.FinClass,
              'TLID': task.TLID,
              'SelectionLevel': 5,
              'SubTeamID': task.STID,
              'Type': task.Type
            });
            AllLevel.push(5);
          }

树的ID如下（后端）（例如：）：

2

2-0

2-0-0

Answer 1

从父母那里处理孩子的状态基本上是反模式。您可以通过在父级中注册子级裁判来解决该问题，并通过裁判触摸其选中状态。但是直到今天，在这些情况下，我总是最终使用redux，它更加干净。

将整个树存储为全局状态，并在对父级执行取消选中操作时，reduce会根据父级id处理子级的选中状态。

与此同时，所有线路都是连接的组件，它们根据其ID监视自己的状态。

const reducer = (state, action) => {
  let isUnchecking;
  switch (action.type) {
    case 'TOGGLE': return state.map(line => {
      if (line.id === action.payload.id) {
        isUnchecking = line.checked;
        return { ...line, checked: !line.checked }
      }
      if (line.parent == action.payload.id && isUnchecking)  {
        return { ...line, checked: false }
      }
      return line;
    });
    default: return state;
  }
}

const initialState = [
  { id: 1, checked: true, parent: null },
  { id: 2, checked: true, parent: 1 },
  { id: 3, checked: false, parent: 1 },
  { id: 4, checked: false, parent: null }
]

const store = Redux.createStore(reducer, initialState);

const Line = ({ checked, onClick, label, children }) => (
  <li onClick={onClick}>
    <span>{checked ? '[x] ' : '[_] '}</span>
    {label}
    <ul>{children}</ul>
  </li>
)

const mapStateToProps = state => ({ lines: state })

const LineContainer = ReactRedux.connect(mapStateToProps)(props => {
  const { id } = props;
  return (
      <Line
        {...props}
        onClick={e => {props.dispatch({ type: 'TOGGLE', payload: { id } }); e.stopPropagation();}}
        checked={props.lines.find(line => line.id === id).checked}
      />
    )
  }
)


class App extends React.Component {
  render(){
    return (
    <ReactRedux.Provider store={store}>
      <LineContainer id={1} label="Accident Report">
        <LineContainer id={2} label="TPL" />
        <LineContainer id={3} label="WC" />
      </LineContainer>
      <LineContainer id={4} label="Administrative Supervisor" />
    </ReactRedux.Provider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/6.0.1/react-redux.js"></script>
<div id="root"></div>

想在React JS中取消选中树结构的节点

1 个答案: