React.js - 可排序树：如何将自定义子数据添加到 React-Sortable-tree？

Question

我正在使用“react-sortable-tree”库来构建子层次结构。我正在尝试修改操场的功能：https://frontend-collective.github.io/react-sortable-tree/storybook/?selectedKind=Basics&selectedStory=Add%20and%20remove%20nodes%20programmatically&full=0&addons=0&stories=1&panelRight=0'

我想要的是，当我点击“添加孩子”按钮时，它会打开一个新的文本框。在该文本框中插入文本后，它应该被更新为一个新节点，而不是库提供的默认数组。

这是我迄今为止努力实现的目标：

import 'react-sortable-tree/style.css';
import React, { Component } from 'react';
import SortableTree, { addNodeUnderParent, removeNodeAtPath } from 'react-sortable-tree';


const firstNames = [
  'Abraham',
  'Adam',
  'Agnar',
  'Albert',

];

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      treeData: [{ title: 'Peter Olofsson' }, { title: 'Karl Johansson' }],
      addAsFirstChild: false,
      inputChange: false,
      childName: ''
    };
  }

  handleChange =()=>{
    const currentState = this.state.inputChange;
    this.setState({ inputChange: !currentState });
  }


  setValue = (e) => {
    this.setState({
        childName: e.target.value
    })
  }

  handleSubmit = (e) => {
    e.preventDefault();
    console.log('A name was submitted: ' + this.state.childName);
    this.setState({
        inputChange: false
    })
  }


  render() {
    const getNodeKey = ({ treeIndex }) => treeIndex;
    const getRandomName = () =>
      //firstNames[Math.floor(Math.random() * firstNames.length)];
    <form>
        <label>
            Name:
            <input type="text" name="name" />
        </label>
        <input type="submit" value="Submit" />
    </form>

    return (
      <div>
        <div style={{ height: 300 }}>
          <SortableTree
            treeData={this.state.treeData}
            onChange={treeData => this.setState({ treeData })}
            generateNodeProps={({ node, path }) => ({
              buttons: [
                <button
                  onClick={
                    // this.setState(state => ({
                    //   treeData: addNodeUnderParent({
                    //     treeData: state.treeData,
                    //     parentKey: path[path.length - 1],
                    //     expandParent: true,
                    //     getNodeKey,
                    //     newNode: {
                    //       title: `${getRandomName()} ${
                    //         node.title.split(' ')[0]
                    //       }sson`,
                    //     },
                    //     addAsFirstChild: state.addAsFirstChild,
                    //   }).treeData,
                    // }))

                    this.handleChange
                  }
                >
                  Add Child
                </button>,
                <button
                  onClick={() =>
                    this.setState(state => ({
                      treeData: removeNodeAtPath({
                        treeData: state.treeData,
                        path,
                        getNodeKey,
                      }),
                    }))
                  }
                >
                  Remove
                </button>,
              ],
            })} />
        </div>
        {this.state.inputChange === true ? <form onSubmit={this.handleSubmit}>
                                                <label>
                                                    Name:
                                                    <input type="text" name="name" value={this.state.childName} onChange={this.setValue} />
                                                </label>
                                                <input type="submit" value="Submit" />
                                            </form>
                                        : null}
      </div>
    );
  }
}

文本框值正在更新，但我无法将更新后的状态处理到组件中。请帮助解决这个问题。

Answer 1

如果你替换你的这部分代码：

        <button
          onClick={
            // this.setState(state => ({
            //   treeData: addNodeUnderParent({
            //     treeData: state.treeData,
            //     parentKey: path[path.length - 1],
            //     expandParent: true,
            //     getNodeKey,
            //     newNode: {
            //       title: `${getRandomName()} ${
            //         node.title.split(' ')[0]
            //       }sson`,
            //     },
            //     addAsFirstChild: state.addAsFirstChild,
            //   }).treeData,
            // }))

            this.handleChange
          }
        >
          Add Child
        </button>,

用这个：

            <button
              onClick={
                () => this.setState(state => ({
                  treeData: addNodeUnderParent({
                    treeData: state.treeData,
                    parentKey: path[path.length - 1],
                    expandParent: true,
                    getNodeKey,
                    newNode: {
                      title: `${getRandomName()} ${
                        node.title.split(' ')[0]
                        }sson`,
                    },
                    addAsFirstChild: state.addAsFirstChild,
                  }).treeData,
                }))
              }
            >
              Add Child
            </button>,

那么一切都会按预期进行。我猜你错过了将函数传递给按钮的 onClick 事件..

// this.setState(state => ({  

变成

() => this.setState(state => ({

希望还不晚:)