有一个选择形式,在第一个选择了一系列《星球大战》中的电影。并且其他两个应显示所选电影中的太空飞船。我不太了解如何正确编写条件,如果您对条件进行写操作,那么就会发现很多代码,我相信还有一种更合理的方法。
组件代码:
class StarshipsCompare extends Component {
swapiService = new SwapiService();
state = {
filmList: [],
};
componentDidMount() {
this.swapiService.getAllFilms().then((filmList) => {
this.setState({ filmList });
});
}
renderItems(arr) {
return arr.map(({ id, title }) => {
return (
<option value={title} key={id}>
{title}
</option>
);
});
}
render() {
const { filmList } = this.state;
const items = this.renderItems(filmList);
return (
<div>
<form>
<p>Выберите фильм корабли из которого хотите сравнить:</p>
<select className="custom-select">{items}</select>
<div className="row p-5">
<div className="col">
<p>Выберите корабль для сравнения:</p>
<select className="custom-select"></select>
</div>
<div className="col">
<p>Выберите корабль для сравнения:</p>
<select className="custom-select"></select>
</div>
</div>
</form>
</div>
);
}
}
并获取数据:
export default class SwapiService {
_apiBase = "https://swapi.dev/api";
async getResource(url) {
const res = await fetch(`${this._apiBase}${url}`);
if (!res.ok) {
throw new Error(`Could not fetch ${url}, status: ${res.status}`);
}
return await res.json();
}
getAllFilms = async () => {
const res = await this.getResource("/films/");
return res.results.map(this._transformFilms);
};
}
答案 0 :(得分:0)
这是我将如何做的一个简单示例。 &&
的使用是if
中JSX
语句的优雅替代。
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="app_root"></div>
<script type="text/babel">
// Constants representing API Data.
const MAIN_SELECT_OPTIONS = ["A", "B", "C"];
const SUB_SELECT_OPTIONS = {
A: ["A1", "A2", "A3"],
B: ["B1", "B2", "B3"],
C: ["C1", "C2", "C3"]
};
const SelectState = () => {
const [mainSelect, setMainSelect] = React.useState("");
const [subSelect, setSubSelect] = React.useState("");
const [subSelectOptions, setSubSelectOptions] = React.useState([]);
const onMainSelectChange = (event) => {
setMainSelect(event.target.value);
setSubSelect("");
if (event.target.value) {
setSubSelectOptions(SUB_SELECT_OPTIONS[event.target.value]);
} else {
setSubSelectOptions([]);
}
};
const onSubSelectChange = (event) => {
setSubSelect(event.target.value);
};
return (
<div>
<h1> Main Select </h1>
<select onChange={onMainSelectChange} value={mainSelect}>
<option value="">Select Main</option>
{MAIN_SELECT_OPTIONS.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
<h1> Sub Select </h1>
<select onChange={onSubSelectChange} value={subSelect}>
{!subSelect && <option>Select a State</option>}
{subSelectOptions.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
</div>
);
};
ReactDOM.render(<SelectState />, document.getElementById("app_root"));
</script>