React Hooks - 重置下拉列表
React Hooks - Reset the drop down
我正在使用 React Hooks 测试多个 select/option 元素。我能够从本地列表填充下拉菜单,还可以使用 axios API getter 方法。最后,我创建了一个重置按钮来将这些下拉值重置为其原始值(如 "select a state" 和 "select an author")但无法使其正常工作,我不确定重置这些值的最佳方法是什么值。
我没有在此处发布代码,而是在此处向该示例项目添加了 link。非常感谢任何 tips/pointers。
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import StateSelector from "./StateSelector";
import Footer from "./Footer";
const SelectTesting = () => {
const reqUrl = "https://hn.algolia.com/api/v1/search?query=redux";
const initialStateValue = [{ id: 0, value: " --- Select A State --- " }];
const initialAuthorValue = [" --- Select an Author --- "];
const allowedState = [
{ id: 1, value: "Alabama" },
{ id: 2, value: "Georgia" },
{ id: 3, value: "Missisippi" }
];
const [authors, setAuthors] = useState(initialAuthorValue);
const [allStates, setAllSelected] = useState(initialStateValue);
const [stateSelected, setStateSelected] = useState(initialStateValue[0].value);
let authorComponent = null;
// useEffect to get states
useEffect(() => {
console.log("Inside effect");
const stateValues = initialStateValue;
allowedState.map(sel => {
stateValues.push(sel);
return setAllSelected(stateValues);
});
}, []);
// useEffect to get Authors
useEffect(() => {
console.log("Inside effect 2");
axios(reqUrl).then(result =>
result.data.hits.map(res => {
initialAuthorValue.push(res.author);
return setAuthors(initialAuthorValue);
})
);
}, []);
authorComponent = (
<select>
{authors.map((author, index) => (
<option key={index}>{author}</option>
))}
</select>
);
const stateSelectionHandler = event => {
const value = event.target.value;
console.log(allStates);
const stateIndex = allStates.findIndex(state => state.value === value);
console.log(event.target.value, allStates, "index:", stateIndex);
setStateSelected(event.target.value);
};
const resetClickHandler = () => {
console.log("reset was clicked");
setStateSelected(initialStateValue[0].value);
};
console.log("Inside Index.js Main");
return (
<div>
<hr />
<StateSelector
selectedState={stateSelected}
allStates={allStates}
onStateSelection={stateSelectionHandler}
/>
<hr />
<label>Author:</label>
{authorComponent}
<hr />
<Footer onResetClick={resetClickHandler} />
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<SelectTesting />, rootElement);
您唯一缺少的实际上只是 select 元素中的值属性 <select onChange={onStateSelection} value={props.selectedState}>
但是我认为 StateSelector
组件不需要是有状态组件。最好让它 controlled/dumb 组件只从父级获取 props 并让父级控制它的值和行为。
我正在使用 React Hooks 测试多个 select/option 元素。我能够从本地列表填充下拉菜单,还可以使用 axios API getter 方法。最后,我创建了一个重置按钮来将这些下拉值重置为其原始值(如 "select a state" 和 "select an author")但无法使其正常工作,我不确定重置这些值的最佳方法是什么值。
我没有在此处发布代码,而是在此处向该示例项目添加了 link。非常感谢任何 tips/pointers。
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import StateSelector from "./StateSelector";
import Footer from "./Footer";
const SelectTesting = () => {
const reqUrl = "https://hn.algolia.com/api/v1/search?query=redux";
const initialStateValue = [{ id: 0, value: " --- Select A State --- " }];
const initialAuthorValue = [" --- Select an Author --- "];
const allowedState = [
{ id: 1, value: "Alabama" },
{ id: 2, value: "Georgia" },
{ id: 3, value: "Missisippi" }
];
const [authors, setAuthors] = useState(initialAuthorValue);
const [allStates, setAllSelected] = useState(initialStateValue);
const [stateSelected, setStateSelected] = useState(initialStateValue[0].value);
let authorComponent = null;
// useEffect to get states
useEffect(() => {
console.log("Inside effect");
const stateValues = initialStateValue;
allowedState.map(sel => {
stateValues.push(sel);
return setAllSelected(stateValues);
});
}, []);
// useEffect to get Authors
useEffect(() => {
console.log("Inside effect 2");
axios(reqUrl).then(result =>
result.data.hits.map(res => {
initialAuthorValue.push(res.author);
return setAuthors(initialAuthorValue);
})
);
}, []);
authorComponent = (
<select>
{authors.map((author, index) => (
<option key={index}>{author}</option>
))}
</select>
);
const stateSelectionHandler = event => {
const value = event.target.value;
console.log(allStates);
const stateIndex = allStates.findIndex(state => state.value === value);
console.log(event.target.value, allStates, "index:", stateIndex);
setStateSelected(event.target.value);
};
const resetClickHandler = () => {
console.log("reset was clicked");
setStateSelected(initialStateValue[0].value);
};
console.log("Inside Index.js Main");
return (
<div>
<hr />
<StateSelector
selectedState={stateSelected}
allStates={allStates}
onStateSelection={stateSelectionHandler}
/>
<hr />
<label>Author:</label>
{authorComponent}
<hr />
<Footer onResetClick={resetClickHandler} />
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<SelectTesting />, rootElement);
您唯一缺少的实际上只是 select 元素中的值属性 <select onChange={onStateSelection} value={props.selectedState}>
但是我认为 StateSelector
组件不需要是有状态组件。最好让它 controlled/dumb 组件只从父级获取 props 并让父级控制它的值和行为。