输入2的默认值来自输入1。为什么输入2的状态没有从输入1获得默认值？

Question

我有 2 - HTML：超文本标记语言 | MDN">

<input type="text">

元素。用户在输入 1 中键入的内容将成为输入 2 的默认值。输入 2 的值将用于其他任务。任务应在对话框打开时立即运行。

我的岛屿代码：

import { useState } from "preact/hooks";

export default function Test() {
  const [value1, setValue1] = useState("");
  const [value2, setValue2] = useState("");
  console.log("value1:", value1)
  console.log("value2:", value2)

  return (
    <div>
      <input type="text" autoFocus
        value={value1}
        onInput={e => setValue1(e.target.value)}
      />
      <input type="text"
        value={value2 || value1}
        onInput={e => setValue2(e.target.value)}
      />
      <br />
      Value2: {value2}
    </div>
  );
}

我希望当输入 1 有价值时

value2

能够正确显示。然而事实并非如此。仅当输入 2 的值发生修改时，才会设置

value2

。为什么会这样呢？如何解决这个问题？

我实际上在做什么：我有一个搜索栏来搜索保存的URL，如果用户想从新URL创建新数据，他们可以将URL粘贴到搜索栏，然后会显示一个模式。在模式内部会有一个表单供他们添加更多元数据。第一个字段是 URL，这是他们刚刚粘贴的内容。其他字段会自动填充，但可以手动编辑。目前，他们必须在 URL 字段中进行愚蠢的编辑才能触发任务。

请注意，在 Preact 中，使用

onInput

代替

onChange

。

Answer 1

通常有更好的图案可用，但如果没有非常具体的复制品，您可以采用以下一种方法：

import { useReducer } from 'preact/hooks';

const initialState = { value1: '', value2: '' };
const reducer = (state, action) => {
  switch (action.input) {
    case 1: return { value1: action.value, value2: action.value };
    case 2: return { ...state, value2: action.value };
    default: throw new Error('Unexpected action');
  }
};

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      <input value={state.value1} onInput={(e) => dispatch({ input: 1, value: e.currentTarget.value })} />
      <input value={state.value2} onInput={(e) => dispatch({ input: 2, value: e.currentTarget.value })} />
      <p>Value1: {state.value1}</p>
      <p>Value2: {state.value2}</p>
    </div>
  );
}

render(<App />, document.getElementById('app'));