Question

我是新来的人，我在使用一个名为react-dnd的库。我正在尝试制作一个可拖动组件（一个只是数字的骰子），以将其值作为可放置输入组件的值（以表单形式输入的数字）的值（附加SS）移动。

当前；当我将其拖放到droppable组件时，我们只是通过控制台记录可拖动组件。但是我想要的是当我放入可投放组件时更改输入的值。我尝试了很多方法，但无法获得可放置组件来显示可拖动组件的值。如何从左向右移动值并将其作为值保留在输入表单中。

可拖动组件

  export default function Dice({ id = null, dice = 0 }) {
  const [, drag] = useDrag({
    item: { type: ItemTypes.DICE, id: id },
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  });

  return (
    <div ref={drag} className='dice' id={id}>
      <span>{dice}</span>
    </div>
  );

可投放组件

  const [{ isOver }, drop] = useDrop({
    accept: ItemTypes.DICE,
    drop: (item, monitor) => {
      console.log(item);
    },
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
    }),
  });

  return (
    <div>
      <input
        ref={drop}
        id={props.id}
        name={props.name}
        value={props.value}
        type={props.type}
        placeholder={props.placeholder}
        required
        min={props.min ? props.min : 1}
        max={props.max ? props.max : 150}
        minLength={props.minLength ? props.minLength : 0}
      />
    </div>
  );

screenshot

React dnd-拖放以更改输入值

0 个答案: