Javascript React clear input fields返回语句逻辑在filtering onClick vs.Submit中
我想知道如何控制输入字段，使其在单击搜索按钮之前不会激发。。。 此外，我正在尝试在显示搜索时清空输入字段。 我对Submit和onClick事件以及如何控制输入字段感到困惑 在单击搜索按钮之前，我最难修改过滤中的返回语句以避免显示卡片：Javascript React clear input fields返回语句逻辑在filtering onClick vs.Submit中,javascript,reactjs,Javascript,Reactjs,我想知道如何控制输入字段，使其在单击搜索按钮之前不会激发。。。 此外，我正在尝试在显示搜索时清空输入字段。 我对Submit和onClick事件以及如何控制输入字段感到困惑 在单击搜索按钮之前，我最难修改过滤中的返回语句以避免显示卡片： return ( searchYear == card.awardYear || !searchYear ? card.laureates[0].knownName?.en.toLowerCa
return (
searchYear == card.awardYear || !searchYear ?
card.laureates[0].knownName?.en.toLowerCase().includes(searchName.toLowerCase())
: null
)
import React, { Component } from 'react';
import axios from 'axios';
import classes from './CardsCategory.module.css';
import WinnerCard from '../../components/WinnerCard/WinnerCard'
import HomeButtons from "../HomeButtons/HomeButtons"
import buttonCategory from "../../components/ButtonCategory/ButtonCategory"
import SearchBar from '../../components/SearchBar/SearchBar';
import styled from 'styled-components';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
// const StyledDiv = styled.div`
// border: 10px solid orange;
// display: inline;
// `
class Cards extends Component {
state = {
allCards: [],
category: null,
searchYear: '',
searchName: ''
}
// renderCard = card => {
// const { search } = this.state;
// var code = country.code.toLowerCase();
componentDidMount() {
console.log("CARDS CATEGORY", this.props)
let category = this.props.match.params.category_name;
axios.get('http://api.nobelprize.org/2.0/nobelPrizes?limit=50&sort=desc&nobelPrizeCategory=' + category + '&format=json&csvLang=en')
.then(res => {
const categoryData = res.data.nobelPrizes;
console.log("categoryData", res.data.nobelPrizes)
// console.log("CATEGORY", categoryData?.category?.en)
this.setState({
allCards: categoryData,
//<fetch category from the API that your router provides>
category: this.props.match.params.category_name,
})
}).
catch(err => console.log(err))
};
onChangeYear = e => {
e.preventDefault(); //???
console.log("ON CHANGE", e.target.value)
console.log("ON CHANGE prevent", e.preventDefault)
this.setState({
searchYear: e.target.value
});
}
// onChangeName = e => {
// e.preventDefault(); //???
// // console.log("ON CHANGE", e.target.value)
// this.setState({
// searchName: e.target.value
// })
// }
onClickSearch = e => {
// e.preventDefault(); //???
console.log("ON CLICK", this.state);
let category = this.props.match.params.category_name;
axios.get('http://api.nobelprize.org/2.0/nobelPrizes?sort=desc&nobelPrizeCategory=' + category + '&format=json&csvLang=en')
.then(res => {
const categoryData = res.data.nobelPrizes;
this.setState({
allCards: categoryData,
// category: this.props.match.params.category_name,
})
}).
catch(err => console.log(err))
}
onClickReset = e => {
this.setState({
allCards: [],
searchYear: '',
searchName: '',
});
}
handleSubmit = e => {
console.log("SUBMIT")
e.preventDefault();
this.setState({
searchYear: '',
searchName: ''
});
}
render() {
const { searchYear, searchName, allCards } = this.state;
let filterCards = allCards.filter(card => {
//REGEX
// if (card.forEach(entry => {
// console.log(entry)
// let regexp = /[\w+ \s]+ /gi;
// let result = entry.match(regexp);
// console.log(result);
// })
// )
return (
searchYear == card.awardYear || !searchYear ?
card.laureates[0].knownName?.en.toLowerCase().includes(searchName.toLowerCase())
: null
)
})
let cards = filterCards.map((card) => {
return <WinnerCard
key={card.id}
awardYear={card.awardYear}
category={card.category.en}
name={card.laureates[0].knownName?.en}
// name1={card.laureates[1].knownName?.en}
// name2={card.laureates[2].knownName?.en}
motivation={card.laureates[0].motivation?.en}
/>
});
// const style = { display: 'inline', border: '10px solid orange', width: '100px' };
return (
<div>
{/* <StyledDiv> */}
{/* <HomeButtons /> */}
{/* </StyledDiv> */}
<div>
{/* <SearchBar />*/}
<Form
className="form-row p-0 m-3 mt-5 mb-5 justify-content-center"
type="submit"
value="Submit"
onSubmit={this.handleSubmit}
>
<Form.Label htmlFor="" className="col-form-label text-right col-auto text-uppercase font-weight-normal">Year :</Form.Label>
<Form.Control
type="text"
placeholder=""
className="col-2 text-center font-weight-bold border-dark"
value={this.state.searchYear}
onChange={this.onChangeYear}
/>
<Form.Label htmlFor="" className="col-form-label ml-2 text-right col-auto font-weight-normal">NAME :</Form.Label>
<Form.Control
type="text"
placeholder=""
className="col-4 font-weight-bold border-dark"
value={this.state.searchName}
onChange={this.onChangeName}
/>
<Button
type="button"
variant="btn ml-4 col-1 outline-dark border-dark gold"
onClick={this.onClickSearch}
>SEARCH</Button>
<Button
type="button"
variant="btn ml-4 col-1 outline-dark border-dark gold"
onClick={this.onClickReset}
>RESET</Button>
</Form>
</div>
<div>
{cards}
</div>
</div>
)
}
}
export default Cards;
import React，{Component}来自'React'；
从“axios”导入axios；
从“/CardsCategory.module.css”导入类；
从“../../components/WinnerCard/WinnerCard”导入WinnerCard
从“./HomeButtons/HomeButtons”导入HomeButtons
从“../../components/buttonCategory/buttonCategory”导入buttonCategory
从“../../components/SearchBar/SearchBar”导入搜索栏；
从“样式化组件”导入样式化；
从“react引导/表单”导入表单；
从“反应引导/按钮”导入按钮；
//const StyledDiv=styled.div`
//边框：10px实心橙色；
//显示：内联；
// `
类卡扩展组件{
状态={
所有卡片：[]，
类别：空，
搜索年份：''，
搜索名称：“”
}
//renderCard=卡片=>{
//const{search}=this.state；
//var code=country.code.toLowerCase（）；
componentDidMount（）{
console.log（“卡片类别”，this.props）
让category=this.props.match.params.category\u name；
axios.get（）http://api.nobelprize.org/2.0/nobelPrizes?limit=50&sort=desc&nobelPrizeCategory=“+category+”&format=json&csvLang=en'）
。然后（res=>{
const categoryData=res.data.nobelPrives；
log（“categoryData”，res.data.nobelPrives）
//console.log（“类别”，categoryData？.CATEGORY？.en）
这是我的国家({
所有卡片：分类数据，
//
类别：this.props.match.params.category_名称，
})
}).
catch（err=>console.log（err））
};
onChangeYear=e=>{
e、 preventDefault（）；/？？？
console.log（“更改时”，例如target.value）
log（“ON CHANGE prevent”，例如prevent default）
这是我的国家({
搜索年份：e.target.value
});
}
//onChangeName=e=>{
//e.preventDefault（）；/？？？
////console.log（“ON CHANGE”，e.target.value）
//这是我的国家({
//搜索名称：e.target.value
// })
// }
onClickSearch=e=>{
//e.preventDefault（）；/？？？
console.log（“单击”此.state）；
让category=this.props.match.params.category\u name；
axios.get（）http://api.nobelprize.org/2.0/nobelPrizes?sort=desc&nobelPrizeCategory=“+category+”&format=json&csvLang=en'）
。然后（res=>{
const categoryData=res.data.nobelPrives；
这是我的国家({
所有卡片：分类数据，
//类别：this.props.match.params.category_名称，
})
}).
catch（err=>console.log（err））
}
onClickReset=e=>{
这是我的国家({
所有卡片：[]，
搜索年份：''，
搜索名称：“”，
});
}
handleSubmit=e=>{
控制台日志（“提交”）
e、 预防默认值（）；
这是我的国家({
搜索年份：''，
搜索名称：“”
});
}
render（）{
const{searchYear，searchName，allCards}=this.state；
让filterCards=allCards.filter（card=>{
//正则表达式
//if（card.forEach）（条目=>{
//console.log（条目）
//让regexp=/[\w+\s]+/gi；
//让结果=entry.match（regexp）；
//控制台日志（结果）；
// })
// )
返回(
searchYear==card.awardYear | |！searchYear？
card.laureates[0].knownName？.en.toLowerCase（）.includes（searchName.toLowerCase（））
：null
)
})
让卡片=过滤卡片.map（（卡片）=>{
返回
});
//常量样式={display:'inline'，border:'10px实心橙色'，width:'100px'}；
返回(
{/* */}
{/* */}
{/* */}
{/* */}
年份：
姓名：
搜寻
重置
{卡片}
)
}
}
导出默认卡；