Django 使用codemirror的React组件未发送表单提交时的所有数据

我在项目中使用django、react和react-codemirror2，用户可以在其中输入SQL代码。我遇到了一个问题，request.POST中只存在来自textarea的部分文本。我发现文本区的最后一行大部分都被发送了。我很困惑

反应成分

import React from 'react'
import {UnControlled as CodeMirror} from 'react-codemirror2'
import DjangoCSRFToken from 'django-react-csrftoken'

class SQLForm extends React.Component{
    componentDidMount() {
        let textarea = document.getElementsByTagName('textarea')[0]
        textarea.setAttribute('name', 'sql');
    }

    render(){
        return(
            <div>
                <form action="" method="POST">
                    <DjangoCSRFToken/>
                    <CodeMirror
                      options={{
                        mode: 'text/x-mssql',
                        theme: 'material',
                        lineNumbers: true
                      }}
                      onChange={(editor, data, value) => {
                      }}
                    />
                    <br/>
                    <button type="submit">Submit</button>
                </form>
            </div>
        )
    }
}

export default SQLForm

例如，在文本区域中，如果键入以下内容

SELECT *
FROM whatever
WHERE something=2

print（request.POST['sql']）在控制台上显示以下内容

=2

为了完整起见，这是页面加载时的textarea标记

<textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0" name="sql"></textarea>

---

通过不担心表单中存在CodeMirror实现了这一点。相反，我使用state从CodeMirror onChange函数中捕获最后一个值，然后将其分配给按钮的value属性。将文本区域中的名称属性切换为按钮本身

import React from 'react'
import {UnControlled as CodeMirror} from 'react-codemirror2'
import DjangoCSRFToken from 'django-react-csrftoken'

class SQLForm extends React.Component{
    constructor(props){
        super(props)
        this.updateText = this.updateText.bind(this);
        this.state = {
            sql_text: ''
        }
    }

    updateText(value){
        this.setState((prevState)=>({sql_text:value}))
    }

    render(){
        return(
            <div>
                <CodeMirror
                      options={{
                        mode: 'text/x-mssql',
                        theme: 'material',
                        lineNumbers: true
                      }}
                      onChange={(editor, data, value) => {
                          {this.updateText(value)}
                      }}
                 />
                <form action="" method="POST">
                    <DjangoCSRFToken/>
                    <button type="submit" value={this.state.sql_text} name="sql">Submit</button>
                </form>
            </div>
        )
    }
}

export default SQLForm

从“React”导入React
从'react-codemirror2'导入{UnControlled as CodeMirror}
从“django react csrftoken”导入django csrftoken
类SQLForm扩展了React.Component{
建造师（道具）{
超级（道具）
this.updateText=this.updateText.bind（this）；
此.state={
sql\u文本：“”
}
}
updateText（值）{
this.setState（（prevState）=>（{sql_text:value}））
}
render（）{
返回(
{
{this.updateText（值）}
}}
/>
提交
)
}
}
导出默认SQLForm

import React from 'react'
import {UnControlled as CodeMirror} from 'react-codemirror2'
import DjangoCSRFToken from 'django-react-csrftoken'

class SQLForm extends React.Component{
    constructor(props){
        super(props)
        this.updateText = this.updateText.bind(this);
        this.state = {
            sql_text: ''
        }
    }

    updateText(value){
        this.setState((prevState)=>({sql_text:value}))
    }

    render(){
        return(
            <div>
                <CodeMirror
                      options={{
                        mode: 'text/x-mssql',
                        theme: 'material',
                        lineNumbers: true
                      }}
                      onChange={(editor, data, value) => {
                          {this.updateText(value)}
                      }}
                 />
                <form action="" method="POST">
                    <DjangoCSRFToken/>
                    <button type="submit" value={this.state.sql_text} name="sql">Submit</button>
                </form>
            </div>
        )
    }
}

export default SQLForm