Javascript 将用户输入数据添加到React应用程序中的常量

我在trello克隆中有一个app.js文件

const clusterColumns =
    {
        [uuid()]: {
            name: 'Book 1',
            items: book1
        },
        [uuid()]: {
            name: 'Book 2',
            items: book2
        },
    };

存储玩具数据，表示帖子

const book1 = [
    {id: uuid(), content: 'reflections'}
];
const book2 = [
    {id: uuid(), content: 'arising'},
]

单个常量将玩具数据拉入trello克隆的列中

const clusterColumns =
    {
        [uuid()]: {
            name: 'Book 1',
            items: book1
        },
        [uuid()]: {
            name: 'Book 2',
            items: book2
        },
    };

数据硬编码到这些常量中。我想向页面添加一个用户输入，以便用户可以将自己的项目添加到trello克隆的常量中

const clusterColumns =
    {
        [uuid()]: {
            name: 'Book 1',
            items: book1
        },
        [uuid()]: {
            name: 'Book 2',
            items: book2
        },
    };

clusterColumns常量被添加到第三个常量中，当我在电路板上移动数据时，它会简单地清理数据：

const onDragEnd = (result, columns, setColumns ) => {
    if(!result.destination ) return;
    const {source, destination} = result;
    if (source.droppableId!==destination.droppableId) {
        const sourceColumn = columns[source.droppableId];
        const destColumn = columns[destination.droppableId];
        const sourceItems = [...sourceColumn.items];
        const destItems = [...destColumn.items];
        const [removed] = sourceItems.splice(source.index, 1);
        destItems.splice(destination.index, 0, removed);
        setColumns({
            ...columns,
            [source.droppableId]:{
                ...sourceColumn,
                items: sourceItems,
            },
            [destination.droppableId]:{
                ...destColumn,
                items: destItems
            }
        })
    }
    else {
        const column = columns[source.droppableId];
        const copiedItems = [...column.items];
        const [removed] = copiedItems.splice(source.index, 1);
        copiedItems.splice(destination.index, 0, removed)
        setColumns({
            ...columns,
            [source.droppableId]: {
                ...column,
                items: copiedItems
            }
        })
    }
};

app.js文件的一个主要部分是一个嵌套函数，它构建具有某种风格的拖放元素，并拉入玩具数据

function App() {
    const [columns, setColumns] = useState(clusterColumns);
    return (
        <div>
            <div style={{display: 'flex', justifyContent: 'left', height: '95%', position: "relative",
                top: 5, left: 90, opacity: '27%'}}>
                <DragDropContext onDragEnd={result => onDragEnd(result, columns, setColumns)}>
                    {Object.entries(columns).map(([id, column]) => {
                        return (
                            <div style={{display: 'flex', flexDirection: 'column', alignItems:'center',
                                fontFamily: 'Montez, sans-serif', color: '#913aff', fontSize: 27, padding:5, borderRadius: '19px',
                            }}><h2  style={{fontSize:(19*3), height: 45}}>{column.name}</h2>
                                <h2  style={{fontSize:(19*3), height: 45, top:'9px', position:'absolute', opacity:'60%', color:'#ffa0f9'}}>{column.name}</h2>
                                <div style={{margin: 2}}>
                                    <Droppable droppableId={id} key={id} >
                                        {(provided, snapshot) => {
                                            return (
                                                <div {...provided.droppableProps}
                                                     ref={provided.innerRef}
                                                     style={{
                                                         padding: 9,
                                                         width: 190,
                                                         minHeight: 9,
                                                         opacity: '95%',
                                                         borderRadius: '9px',
                                                         background: 'linear-gradient(to right bottom, rgba(196, 181, 255, 1), rgba(132,47,0,0.27)'}} >
                                                         {column.items.map((item, index) => {
                                                            return (
                                                                <Draggable key={item.id} draggableId={item.id} index={index}>
                                                                    {(provided, snapshot) => {
                                                                        return (
                                                                            <div
                                                                                ref={provided.innerRef}
                                                                                {...provided.draggableProps}
                                                                                {...provided.dragHandleProps}
                                                                                style={{
                                                                                    opacity: '95%',
                                                                                    userSelect: 'none',
                                                                                    padding: 19,
                                                                                    margin: '0px 0px 3px 0px',
                                                                                    backgroundColor: snapshot.isDragging ? '#54ffff':'#b3f542',
                                                                                    background: 'linear-gradient(to right bottom, rgba(84, 255, 255, 0.63), rgba(179, 245, 66, 0.81)',
                                                                                    color: 'rgb(115,38,0)' ,
                                                                                    fontFamily: 'Montez',
                                                                                    fontSize: 36,
                                                                                    borderRadius: '9px',
                                                                                    ...provided.draggableProps.style
                                                                                }}>
                                                                                {item.content}
                                                                            </div>
                                                                        )
                                                                    }}
                                                                </Draggable>
                                                            )
                                                        }
                                                    )}
                                                    {provided.placeholder}
                                                </div>
                                            )
                                        }}
                                    </Droppable>
                                </div>
                            </div>
                        )
                    })}
                </DragDropContext>
            </div>
        </div>
    );
}

函数应用程序（）{
const[columns，setColumns]=useState（clusterColumns）；
返回(
onDragEnd（结果、列、设置列）}>
{Object.entries（columns.map）（[id，column]）=>{
返回(
{column.name}
{column.name}
{（已提供，快照）=>{
返回(
{column.items.map（（项，索引）=>{
返回(
{（已提供，快照）=>{
返回(
{item.content}
)
}}
)
}
)}
{提供的.占位符}
)
}}
)
})}
);
}

我已尝试添加另一个类：

class Cell extends React.Component {
    render() {
        return (
            <form>

                <input
                    type="text" style={{
                        display:'flex',
                    position:'relative',
                        top: '-360px',
                    right:'95px',
                    fontFamily: "VT323",
                    width:'144px',
                    fontSize:'36px',
                    color: 'rgb(115,38,0)',
                    opacity:'60%',
                    borderRadius: '9px',
                    height: '45px',
                    background: 'radial-gradient(rgba(196, 181, 255, .9), rgba(168,255,0,0.19)',
                    borderColor: 'rgba(255,255,255,0)'
                }}
                />
            </form>
        );
    }
}

类单元格扩展React.Component{
render（）{
返回(
);
}
}

---

但它是一个简单的用户表单。我想将输入的数据添加到程序顶部的常量中。

你说的Trello clone是什么意思？Trello似乎是一个应用程序，但不是开源的。你想重新创造它吗？如果您链接到您克隆的repo，或者发布一些您编写的代码来尝试您要求的内容，这将有所帮助。当然，您将在一秒钟内编辑此内容以包含整个程序