反应如何更新在合适的位置JSON？

Question

我使用反应以显示同与该值的数据和输入的表格。 我的问题是如何添加我的代码内部的事件处理程序？ 以及如何更新我的JSON与正确的价值正确的位置？ 我的JSON是一个名为状态卡。 我的JSON看起来是这样的：

cards: [{
      index: 0,
      export: true,
      fieldname: 'sub_nr',
      caption: "Subnr",
      tags: []
    }, {
      index: 1,
      export: false,
      fieldname: 'address1',
      caption: "Adress",
      tags: []
    }, {
      index: 2,
      export: false,
      fieldname: 'post_code',
      caption: "zipcode",
      tags: []
    }]

我的代码生成此：

这是我反应过来的代码：

    const Card = props => {


  return props.connectDropTarget(
    <tbody>
      { props.connectDragSource(
          <tr className="pt-1 pb-1">
            <td style={{textAlign: "center"}}>
              <input type="checkbox" checked={props.export} />
            </td>
          <td>
          <input type="text" value={props.caption} />
          </td> 
          <td>
          <input type="text" value={props.fieldname} />
          </td> 
          <td>
          <input type="option"  />
          </td>
          <td style={{textAlign: "center"}}>
            <i class="fa fa-arrows" aria-hidden="true"></i>
          </td>
        </tr>
      ) }
  </tbody>
  );
}

const typeCard = Symbol.for('@@Type::Card');

const specTarget = {
  drop(props) {
    return {
      index: props.index,
      indexnr: props.indexnr,
    };
  }
};

const specSource = {
  beginDrag(props) {
    return {
      index: props.index,
    };
  },
  endDrag(props, monitor) {
    if (!monitor.didDrop()) {
      return;
    }
    const source = monitor.getItem();
    const target = monitor.getDropResult();


    if (source.index === target.index) {
      return;
    }
    props.moveCard(source.index, target.indexnr);
  }
};

const collectTarget = connect => ({
  connectDropTarget: connect.dropTarget(),
});

const collectSource = (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging()
});

const CardWithDnD = ReactDnD.DropTarget(typeCard, specTarget, collectTarget)(
  ReactDnD.DragSource(typeCard, specSource, collectSource)(Card)
);

class App extends React.Component {

  constructor(props) {
    super(props);
    this.moveCard = this.moveCard.bind(this);
    this.state = {
      cards: [{
          index: 0,
          export: true,
          fieldname: 'sub_nr',
          caption: "Subnr",
          tags: []
        }, {
          index: 1,
          export: false,
          fieldname: 'address1',
          caption: "Adress",
          tags: []
        }, {
          index: 2,
          export: false,
          fieldname: 'post_code',
          caption: "Postcode",
          tags: []
        }
      ]
    };
  }
  moveCard (index, indexnr) {
    const { cards } = this.state;
    const sourceCard = cards.find(card => card.index === index);
    const sortCards = cards.filter(card => card.index !== index)
    sortCards.splice(indexnr, 0, sourceCard);
     Object.keys(sortCards).forEach(function(nr) {
    sortCards[nr].index = parseInt(nr, 10);
    });
    this.setState({ cards: sortCards });
    console.log(this.state.cards);
  }

  render() {
    const { cards } = this.state;
    return (
      <table className="offset-2 col-8">
        { cards.map((card, i) => (
          <CardWithDnD
            key={card.index}
            indexnr={i}
            moveCard={this.moveCard}
            {...card}
          />
        )) }
      </table>
    );
  }
}

ReactDOM.render(
  <ReactDnD.DragDropContextProvider backend={ReactDnDHTML5Backend}>
    <App />
  </ReactDnD.DragDropContextProvider>,
  document.getElementById('root'),
);

我已经能够在拖动表行更新索引，但我也希望，当我更改输入更新的Json fieldname和caption。 怎么做？

Answer 1

创建handleChange(event)功能，并将其分配给得到你想要获取或设置从输入input领域。然后使用内部(event.target.value)传递的值，并使用this.setState()的handleChange(event)函数内部方法更新您的状态

Check this link for clarification