时间戳

首页 > 解决方案 > 在不标记 DOM 的情况下获取 id 的值

javascript - 在不标记 DOM 的情况下获取 id 的值

问题描述

我正在制作一个待办事项列表应用程序，为此我想在不标记 DOM( document.getElementById().value;) 的情况下获取 id 的值，因为我听说 jsx 不支持它。我也使用过event.target.value，但这不起作用，因为不推荐使用事件！

function listItems(taskName) {
    const tasks = [];
    tasks.push(taskName);

    console.log("Added " + taskName + " to the array!");
}


function CreateArea() {
    return (
        <div className="mainbox">
            <div className="inputdiv">
                <input type="text" placeholder="Enter Task..." className="textbox" id="taskName"/>
                <button className="button" onClick={}>+</button>
            </div>
        </div>
    );
}

附言

我也使用了箭头函数，但是我想不出没有 DOM 来标记 id 的方法。

谢谢！

标签： javascriptreactjs

解决方案

有很多方法可以做这种事情，但我认为你想要的是钩子useRef。

在这种情况下，ref是一个在渲染后指向输入元素的对象。然后，您可以在组件的其他功能中使用该 ref。

例如：

function CreateArea() {
    const inputRef = useRef()

    function onClick() {
        listItems(listItemsinputRef.current.value)
    }

    return (
        <div className="mainbox">
            <div className="inputdiv">
                <input
                  type="text"
                  ref={inputRef} // tell the input element to use this ref.
                  placeholder="Enter Task..."
                  className="textbox"
                  id="taskName"
                />
                <button className="button" onClick={onClick}>+</button>
            </div>
        </div>
    );
}

推荐阅读