如何将值从输入传递到按钮反应？

Question

有一个字段，用于注册文件形成的静态路径。如果用户要根据自己的意愿更改编队的路径，我已经将该字段设置为可编辑。

<div className="w3-col l8 m8 s8">
    <input
        className="w3-input"
        type="text"
        name="file_name"
        defaultValue={`${test_path}`}
        disabled={false}
    />
</div>

Такжеестькнопка，прикликекоторойвызываетсяфункцияформированияфайлапозоданнооупути

<Btn_enabled func={() => create_file(`${test_path}.xmind`)} name="Create file" />

如何将用户的修改路径转移到按钮？

Answer 1

您需要为input组件引入状态。

并引用它（通过道具，状态管理器等）。

例如，名为input的{​​{1}}值状态：

value

如果您使用的React版本不支持钩子，则可以使用类来实现相同的目的：

// With hooks
function InputValueToButton() {
  const [value, setValue] = useState(testPath);
  return (
    <div className="App">
      <input
        onChange={e => setValue(e.target.value)}
        type="text"
        value={value}
      />
      <Btn_enabled func={() => create_file(`${value}.xmind`)}/>
    </div>
  );
}