我对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