Question

我正在学习做出反应，并遇到状态值问题。我有一个功能组件（子组件），它具有下拉框可供选择，并且它们都有自己的状态。单击确认按钮后，状态值将使用prop函数传递给父类。

(Child class)
export default function NativeSelects(props){
    const [search_title, setTitle] = useState('')
    const [search_category,setCategory] = useState('')

    return (
        <div>
            <FormControl className={classes.formControl}>
                <InputLabel htmlFor="age-native-simple">Title</InputLabel>
                <Select
                    native
                    value={search_title}
                    onChange={e => setTitle(e.target.value)}
                    inputProps={{
                        name: 'search_title',
                        id: 'age-native-simple'
                    }}
                >
                    <option value="" />
                    <option value="option1">option1</option>
                    <option value="option2">option2</option>
                    <option value="option3">option3</option>
                </Select>
            </FormControl> 
            <FormControl className={classes.formControl}>
                <InputLabel htmlFor="age-native-helper">Category</InputLabel>
                <Select
                    native 
                    value={search_category}
                    onChange={e => setCategory(e.target.value)}
                    inputProps={{
                        name: 'search_category',
                        id: 'age-native-simple'
                    }}
                >
                    <option value=""/>
                    <option value="option1">option1</option>
                    <option value="option2">option2</option>
                    <option value="option3">option3</option>
                </Select>
            </FormControl>
            <Button variant="contained" color="primary" onClick={props.handler(search_title,search_category)}>Search</Button>
        </div>
    )
}

(Parent class)
searchProduct = (title,category) =>{
    fetch(`/search?title='${title}'&category='${category}'`)
    .then(response => response.json())
    .then(response => this.setState({ products: response.data }))
    .catch(err => console.error(err))
  }

  render(){
    return (
        <ChildClass handler = {() => this.searchProduct}/>
    )
  }

当我检查子类内部的状态值时，它正在正确更改。但是在父类中，第一个值成为一个对象，第二个值变为未定义。我在这里做错了什么？

Answer 1

更改父类处理函数的调用

return (
        <ChildClass handler = {(title,category)=>this.searchProduct(title,category)}/>
    )

子类的更改：

 <Button variant="contained" color="primary" onClick={(title,category)=>props.handler(search_title,search_category)}>Search</Button>

Answer 2

更改为父类中的关注对象。

<ChildClass handler = {this.searchProduct}/>

更改儿童班级

<Button
  variant="contained"
  color="primary"
  onClick={() => props.handler(search_title, search_category)}
>
  Search
</Button>;

反应传递状态值给父

2 个答案: