如何在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。

本文来自投稿,不代表运维实战侠立场,如若转载,请注明出处:https://www.shizhanxia.com/640.html

(0)
上一篇 2022年6月29日 下午3:58
下一篇 2022年6月29日 下午3:58

相关推荐

发表评论

登录后才能评论