如何在react中通过改变 "select "标签中的东西来更新一个字段？

我对React很陌生，我觉得我已经很接近了，但似乎无法解决这个问题。我想通过选择另一个元素（Set）中的一个选项来改变一个元素（Field）中一些文本的值。

我有3个javascript文件。”App”，”Field “和 “Set”。以下是我的代码。

“App “是这样的

import React, { useState } from "react";
import Field from "./Field";
import Set from "./Set";

export default function App() {
  const [region, setRegion] = useState("all");

  function set_region(region) {
    setRegion(region);
  }

  return (
    <div className="App">
      <Set update={set_region} />
      <Field region={region} />
    </div>
  );
}

“字段 “是这样的

import React from "react";

export default function field({ region }) {
  return <p>{region}</p>;
}

“Set “是这样的

import React from "react";

export default function Set(set_region) {
  function update() {
    set_region(this.value);
  }

  return (
    <div>
      <select onChange={update}>
        <option value="all">All</option>
        <option value="car">Carolinas</option>
        <option value="florida">Florida</option>
      </select>
    </div>
  );
}

当前的错误是 “set_region不是一个函数” 我知道你不能这样做，但我只是想尽可能地描绘我的目标。在用下拉菜单更新useState之后，我想让字段文本更新为新的值。另外，”this.value “返回未定义，所以我不知道该在那里使用什么。我是否需要使用State来处理这个问题？

先谢谢你。

解决方案：

这里的问题是，你正在传递给 Set 更新函数作为一个道具，这样你就可以反构该属性，并将其调用为 <select onChange={update}>

然后，在你的APP组件上，你需要接收事件，所以你可以改变它，如

  function set_region(e) {
    setRegion(e.target.value);
  }

我已经建立了一个代码andbox，所以你可以玩的周围。

https:/codesandbox.iosvigilant-heyrovsky-c9uy4?file=srcApp.js。

另外，我建议从useState中传递setRegion函数，而不是创建一个新的函数：D。