[英]select default value is not working reactjs
im triying to select by default a value into a select input but the input is not recognizing that value until i change it manually.我正在尝试将 select 默认值转换为 select 输入,但输入无法识别该值,直到我手动更改它。 By the default i set "All" as my default value.
默认情况下,我将“全部”设置为默认值。 here is my code and the codesandbox link:
这是我的代码和 codesandbox 链接:
import "./styles.css";
import React, { useState, useEffect } from "react";
import { FormField } from "react-form-input-fields";
import "react-form-input-fields/dist/index.css";
export default function App() {
let [type, setType] = useState("All");
const types = [
{ label: "All", value: "All" },
{ label: "Afganistan", value: "Afganistan" },
{ label: "Albania", value: "Albania" },
{ label: "Algeria", value: "Algeria" },
{ label: "American Samoa", value: "American Samoa" },
{ label: "Andorra", value: "Andorra" },
{ label: "Angola", value: "Angola" }
];
function handletype(e) {
setType(e);
}
return (
<div className="App">
{/* <h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2> */}
<FormField
type="select"
value={type}
option={types}
label={"Select your type"}
keys={"label"}
handleOnChange={(value) => handletype(value)}
/>
</div>
);
}
link:关联:
https://codesandbox.io/s/select-problem-ykplcm https://codesandbox.io/s/select-problem-ykplcm
The library you use has a bug您使用的库有一个错误
The source code reveals that the value
prop is only checked in componendDidUpdate
, but this hooks is not called for the initial render 源代码显示
value
prop 仅在componendDidUpdate
中检查,但初始渲染时不会调用此挂钩
I would rather use a different library我宁愿使用不同的库
One easy fix is that set label= [hook value]
一个简单的解决方法是 set
label= [hook value]
import "./styles.css";
import React, { useState, useEffect } from "react";
import { FormField } from "react-form-input-fields";
import "react-form-input-fields/dist/index.css";
export default function App() {
let [type, setType] = useState("All");
return (
<div className="App">
{/* <h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2> */}
<FormField
type="select"
value={type}
option={types}
label={"Select your type"}
keys={"label"}
handleOnChange={(value) => handletype(value)}
/>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.