如何在React.js中将Arrow函数转换为类

我对react.js非常陌生。我需要实现在Class中知道的构造函数和更多函数。所以下面是我要将Arrow函数转换为Class的代码。请帮助我对React.js非常陌生

    const CreateArea = () => {

          const [content, setContent] = useState('')


          function onSubmit(e){
            e.preventDefault()

            var date = moment().utcOffset('+05:30').format('hh:mm A DD-MM-YYYY');

            firebase.firestore().collection('qna').add(
            {
              title: "James",
              content,
              time: new Date(),
              time2: date,
              status: "0"
            })
            .then(() => {
              setContent('')
              swal({
                title: "Question Submitted!",
                text: "Your Question is waiting for Approval.",
                icon: "success",
                button: "Close",
                });
            })
          }

          return (
            <div id="footer">
              <form onSubmit={onSubmit}>
                <textarea
                  name="content"
                  onChange={e => setContent(e.currentTarget.value)}
                  value={content}
                  placeholder="Enter Your Question"
                  rows="2"
                  required
                />
                <button></button>

              </form>

            </div>
          );

        }

像这样的东西

class CreateArea extends React.Component {

    // Some Code ....

    }
评论
  • tqui
    tqui 回复

    Well, to convert your function component in a class component you have to initialize the state with this.state and then declare a render function that will actually display the content, as in the following example:

    class CreateArea extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          test: "test"
        };
      }
    
      render() {
        return (
          <div>
            content here
          </div>
        );
      }
    }
    
  • 香思松
    香思松 回复

    它看起来像这样:

    import * as React from 'react';
    
    export default class CreateArea extends React.Component {
    
        constructor(props) {
            super(props);
            this.state = {
                content: ''
            };
        }
    
        onSubmit(e) {
            e.preventDefault();
    
            var date = moment().utcOffset('+05:30').format('hh:mm A DD-MM-YYYY');
    
            firebase.firestore().collection('qna').add(
                {
                    title: 'James',
                    content,
                    time: new Date(),
                    time2: date,
                    status: '0'
                })
                .then(() => {
                    this.setState({content: ''});
                    swal({
                        title: 'Question Submitted!',
                        text: 'Your Question is waiting for Approval.',
                        icon: 'success',
                        button: 'Close',
                    });
                });
        }
    
        render(): React.ReactNode {
            return (<div id="footer">
                <form onSubmit={this.onSubmit.bind(this)}>
                    <textarea
                        name="content"
                        onChange={e => this.setState({content: e.currentTarget.value})}
                        value={content}
                        placeholder="Enter Your Question"
                        rows="2"
                        required
                    />
                    <button></button>
    
                </form>
    
            </div>);
    
        }
    }
    

    The most important details are to set the state in the constructor, add the render method and replace setContent calls to setState.

  • asaepe
    asaepe 回复

    更换

    const [content, setContent] = useState('')
    

    constructor(props) {
        super(props);
        this.state = {content: ''};
    }
    

    更换

    setContent('');
    

    this.setState({content: ''})
    

    and to access it, use this.state.content

    将您的返回函数放入render()中:

    render() { 
        return ( 
            <div id="footer">
            ....
        );
    }
    

    现在需要使用此函数来调用每个函数,例如:

    <form onSubmit={this.onSubmit}>