如何将此基于 ReactJS 类的组件转换为基于函数的组件？

Posted 2023-03-16

【中文标题】如何将此基于 ReactJS 类的组件转换为基于函数的组件？

【英文标题】：How do I convert this ReactJS class based component to function based component?

【发布时间】：2021-11-24 09:06:05

【问题描述】：

当用户在文本框上提交数据时，我试图重复输入框。 我能够通过几个来源创建以下解决方案：

一个简单的输入框，inputbox.js

import React from 'react';

const InputBox = () => 
  return(
      <input type="text" placeholder='Add your content line here ... '/>
  );
;

export default InputBox;

在 Enter 或单击 CreateRecursiveInputBox.js 时重复输入框的组件

import React from "react";
import styled from "@emotion/styled";
import InputBox from "./inputbox.js";

// creating a bundler component
const Bundle = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
`;

class CreateRecursiveInputBox extends React.Component 

  constructor(props) 
      super(props);
      this.state = 
          values: 
              0: ''
          ,
      ;
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
  

  handleChange(index, value) 
      this.setState(
          values: 
              ...this.state.values,
              [index]: value
          
      );
  

  handleSubmit(event) 
      event.preventDefault();
      this.setState(
          values: 
              ...this.state.values,
              [Object.keys(this.state.values).length]: '' // add new empty item to list
          
      );
  

  render() 
      return (
          <div>
              <form onSubmit=this.handleSubmit>
                   Object.keys(this.state.values).map( (index) => 
                      const value = this.state.values[index];
                      return (<div key= index >
                        <Bundle>
                          <label> "Name" </label>
                          <InputBox
                            value= value 
                            onChange= (event) => this.handleChange( index, event.target.value ) 
                          />
                          /* <input type="submit"/> */
                          <input type="submit" value="Submit"/>
                        </Bundle>
                      </div>
                      );
                  )
              </form>
          </div>
      );
  


export default CreateRecursiveInputBox;

在 UI、App.js 上呈现文本框和重复文本框的组件

import React,  Component  from 'react';
import CreateRecursiveInputBox from './component/CreateRecursiveInputBox.js';

class App extends React.Component   
    render()
        return(
          <div>
            <CreateRecursiveInputBox/>
          </div>

        )      
       

export default App;

我正在尝试将基于类的组件 SubmitCreateRecursiveInputBox.js 转换为基于函数的组件。但目前还没有成功。

【问题讨论】：

您有问题吗？

是的，将基于类的组件转换为基于函数的组件，主要是ES6。我可以将一些简单的类转换为功能组件。然而，由于使用了道具和状态，这太复杂了。无论我尝试多少，它现在都失败了。

“为我转换这个”不是问题。有什么问题？你试过什么？

如果我在问题中添加更多细节，它只会更加冗长并被忽略。

@rayhatfield 这是我尝试过的，***.com/questions/69426497/… 并一直在尝试。由于已经太长，我不能提供更多的细节。

【参考方案1】：

试试这个:)

App.js

import React from 'react';
import CreateRecursiveInputBox from './component/CreateRecursiveInputBox.js';

export default function App() 
    return (
        <div>
            <CreateRecursiveInputBox />
        </div>
    )

创建递归输入框.js

import React,  useState  from "react";
import InputBox from "./inputbox.js";

// creating a bundler component
const Bundle = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
`;

export default function CreateRecursiveInputBox() 
    const [values, setValues] = useState(
        values: 
            0: ''
        ,
    )

    const handleChange = (index, value) => 
        setValues(
            values: 
                ...values,
                [index]: value
            
        );
    

    const handleSubmit = (event) => 
        event.preventDefault();
        setValues(
            values: 
                ...values,
                [Object.keys(values).length]: '' // add new empty item to list
            
        );
    

    return (
        <div>
            <form onSubmit=handleSubmit>
                Object.keys(values).map((index) => 
                    return (<div key=index>
                        <Bundle>
                            <label> "Name" </label>
                            <InputBox
                                value=values[index]
                                onChange=(event) => handleChange(index, event.target.value)
                            />
                            /* <input type="submit"/> */
                            <input type="submit" value="Submit" />
                        </Bundle>
                    </div>
                    );
                )
            </form>
        </div>
    );