Question

我正在使用react来显示带有数据的表和带有值的输入。
我的问题是如何在代码中添加事件处理程序？
还有如何用正确的值在正确的位置更新JSON？
我的JSON是一个名为cards的状态。
我的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

反应如何在正确的位置更新json？

1 个答案: