一个功能组件可以有多个功能吗？答案

【问题标题】：is it okay for a functional component to have multiple functions within?一个功能组件可以有多个功能吗？
【发布时间】：2019-08-24 19:03:51
【问题描述】：

我正在使用 useState 编写基于函数的反应组件。我的问题是= A. 理想情况下，我的组件应该由 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>
    )
};

【问题讨论】：

是的，有多种功能是可以的

标签： reactjs components

【解决方案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()

【讨论】：