1

我正在做一个非常大的翻译项目。我使用Formspree来处理表格。我也想翻译那个。

这是Formspree给出的代码：

import React, { useContext } from "react";
import { LanguageContext } from "../../../../App";
import './Form.css';

export default class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.submitForm = this.submitForm.bind(this);
        this.state = {
            status: ""
        };
    }
    
    render() {
        const { status } = this.state;
        return (
            <form
                onSubmit={this.submitForm}
                action="https://formspree.io/f/********"
                method="POST"
            >
                {/* <!-- add your custom form HTML here --> */}
                <div className="container">
                    <label style={{ color: 'black', fontSize: '18px' }}>Name <span style={{ color: '#f14b4d' }}>(Required)</span>:</label>
                    <input type="text" name="Name" className='form-control mb-3' placeholder='Enter Your Name' required />
                    <label style={{ color: 'black', fontSize: '18px' }}>Email <span style={{ color: '#f14b4d' }}>(Required)</span>:</label>
                    <input type="email" name="Email" className='form-control mb-3' placeholder='Enter Your Email' required />
                    <label style={{ color: 'black', fontSize: '18px' }}>Message <span style={{ color: '#f14b4d' }}>(Required)</span>:</label>
                    <textarea type="text" name="Message" className='form-control mb-3' rows={3} placeholder='Tell Us Your Message' required />
                    <label style={{ color: 'black', fontSize: '18px' }}>Phone Number With Country Code <span style={{ color: '#6487FF' }}>(Optional)</span>:</label>
                    <input type="text" name="Phone" className='form-control mb-3' placeholder='Enter Your Phone Number' />
                    {status === "SUCCESS" ? <p className='mt-4' style={{ color: 'black' }}>Thanks For Your Message! Your Message Is Successfully Submitted!</p> : <button className='submit-contact-btn mt-3 mb-4'>Submit</button>}
                    {status === "ERROR" && <p style={{ color: 'black' }}>Oops! There was an error. Please Try Again</p>}
                </div>
            </form>
        );
    }

    submitForm(ev) {
        ev.preventDefault();
        const form = ev.target;
        const data = new FormData(form);
        const xhr = new XMLHttpRequest();
        xhr.open(form.method, form.action);
        xhr.setRequestHeader("Accept", "application/json");
        xhr.onreadystatechange = () => {
            if (xhr.readyState !== XMLHttpRequest.DONE) return;
            if (xhr.status === 200) {
                form.reset();
                this.setState({ status: "SUCCESS" });
            } else {
                this.setState({ status: "ERROR" });
            }
        };
        xhr.send(data);
    }
}

这对我来说一团糟，因为我不使用类组件我使用功能组件。

我试图在该文件中添加我的上下文，并且每次都显示完全相同的错误。

这是错误：

错误

我试图把这段代码放在那里：

const [isBangla, setIsBangla] = useContext(LanguageContext)

我尝试多次输入这行代码，但错误是一样的。

4

2 回答 2

5

在您的类组件中，您可以定义 contextType：

static contextType = LanguageContext;

然后您就可以通过 this.context 使用它，例如，

this.context.setIsBangla()
于 2021-03-31T14:56:13.233 回答
1

要在类组件中使用上下文，您可以分配 acontextType以读取当前上下文。UsingcontextType允许您使用 Context 类型使用最接近的当前值this.context。您可以在任何生命周期方法中引用它，包括渲染函数。

所以，你可以写：

export default class MyForm extends React.Component {
  static contextType = LanguageContext // assign static contextType
    constructor(props) {
      //....
    }

现在，您可以在组件中使用（对于您的示例而言this.context，它将是一个数组）访问上下文值。[isBangla, setIsBangla]MyForm

请注意，您不能useContext在类组件中使用钩子，因为 react-hooks 只能在功能组件中使用。

于 2021-03-31T14:55:40.763 回答