Question

我正在使用useState编写基于函数的React组件。我的问题是= 答：理想情况下，我的组件应该由1个单一功能组成吗？ B.这种“不好的”编码是否在父函数中嵌套了多个函数？ C.有没有简化的方法？ D.如何在不重置状态的情况下使搜索栏清晰可见？

我现在还很陌生，所以我想确保我对它的逻辑有很好的了解。谢谢您的帮助！

该组件最终将成为搜索组件。用户输入术语后，我希望该词映射到卡上……但是现在我只想知道我的代码是否被认为是“正确的”

import React, { useState } from 'react';
import './Form.css';
import Input from './Input';
import Card from '../Card/Card';


export default function SearchForm(){

    // establishing hook

    const [state, setState] = useState();

    // takes user input to set the state variable

    function handleChange(e) {
        setState(e.target.value);
    }

    // log state to console

    function submit (e) {
        console.log(state);    
    }

    return(
        <div className="form-group"> 

            <Input onChange={handleChange}/>

            <button onClick={submit}>
                Submit
            </button>

            <Card>
                <h1>{state}</h1>
            </Card>

        </div>
    )
};

Answer 1

没关系，但是由于handleChange正在调用setState（挂钩中的 setter ）-您应该真正使用自定义挂钩。在组件外部，类似这样的东西应该可以工作：

const useHandleChange = () => {
  const [state, setState] = useState(**default-value**)
  const handleChange = (e) => {
    setState(e.target.value)
  }
  return [state, handleChange]
}

在组件内部，您可以像这样使用该钩子：

const [state, handleChange] = useHandleChange()

一个功能组件内部可以有多个功能吗？

1 个答案: