React - 使用 onChange 和 onKeyDown 時輸入不起作用

Question

我嘗試實現類似多選的功能，用戶可以從數據列表中選擇一個值，也可以輸入一個新值。 如果用戶按下回車鍵，則應將選定的值添加到數組中。 為了檢測輸入字段的變化，我使用onChange和一個狀態變量來保存輸入的當前值。為了檢測輸入的按下，我使用onKeyDown 。 問題是我無法再在輸入字段中鍵入內容，但是可以從數據列表中選擇值。 我發現當我注釋掉onKeyDown時，我可以在輸入字段中鍵入內容，也可以從數據列表提供的值中進行選擇。 但是，在這種情況下，按回車鍵向數組添加值是行不通的。 我是 React 的新手，有什么我想念的嗎？ 我當前的代碼如下所示：

const EditableMultiSelect = ({ field, helpers, metadataField, editMode, setEditMode }) => {
    const { t } = useTranslation();

    const [inputValue, setInputValue] = useState('');

    const handleChange = e => {
       
        const itemValue = e.target.value;
        setInputValue(itemValue);


    }

    const handleKeyDown = event => {
        event.preventDefault();

        if (event.keyCode === 13) {
            field.value[field.value.length] = inputValue;
            helpers.setValue(field.value);
            setInputValue("");
        }


    }

    const removeItem = () => {
        console.log('to be implemented');
    }

    return (
        editMode ? (
            <>
                <div
                     onBlur={() => setEditMode(false)}
                     ref={childRef}>
                    <input name="inputValue"
                           value={inputValue}
                           type="text"
                           onKeyDown={e => handleKeyDown(e)}
                           onChange={e => handleChange(e)}
                           placeholder={t('EDITABLE.MULTI.PLACEHOLDER')}
                           list="data-list"
                    />
                    <datalist id="data-list">
                        {metadataField.collection.map((item, key) => (
                            <option key={key}>{t(item.value)}</option>
                        ))}
                    </datalist>
                </div>
                {(field.value instanceof Array && field.value.length !== 0) ? (field.value.map((item, key) => (
                        <span className="ng-multi-value"
                              key={key}>
                        {t(item)}
                            <a onClick={() => removeItem(key)}>
                            <i className="fa fa-times" />
                        </a>
                    </span>
                    ))) : null}
            </>

        ) : (
            <div onClick={() => setEditMode(true)}>
                {(field.value instanceof Array && field.value.length !== 0) ? (
                    <ul>
                        {field.value.map((item, key) => (
                            <li key={key}>
                                <span>{item}</span>
                            </li>
                        ))}
                    </ul>
                ) : (
                    <span className="editable preserve-newlines">
                            {""}
                    </span>
                )}
                <i className="edit fa fa-pencil-square"/>
            </div>
        )
    );
};

Answer 1

每次按下鍵時，您都會調用event.preventDefault() 。 您應該將其移動到 if 語句中：

const handleKeyDown = event => {
  if (event.keyCode === 13) {
    event.preventDefault();
    field.value[field.value.length] = inputValue;
    helpers.setValue(field.value);
    setInputValue("");
  }
}

Answer 2

您不能再在輸入文本中鍵入任何內容，因為在 handleKeyDown 事件處理程序中，您在前幾行中調用了 event.preventDefault()。 所以我認為您只需將其移至 if 案例：

const handleKeyDown = event => {
  if (event.keyCode === 13) {
    event.preventDefault();

    field.value[field.value.length] = inputValue;
    helpers.setValue(field.value);
    setInputValue("");
  }
}

Answer 3

刪除e.preventDefault()或將其放在 if 語句中。
if 是阻止輸入可編輯的那個。