使用codemirror的React Component不发送表单提交的所有数据

Question

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

React 组件

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

超级简单的django视图（就是看提交了什么）

def index(request):
    if 'sql' in request.POST:
        print(request.POST['sql'])
        return render(request, 'react.html', {})
    else:
        return render(request, 'react.html', {})

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

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>

Answer 1

通过不担心 CodeMirror 出现在表单中来实现这一点。相反，我使用状态从 CodeMirror onChange 函数捕获最后一个 value，然后将其分配给按钮的 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

使用codemirror的React Component不发送表单提交的所有数据

React Component using codemirror not sending all data on form submission

django

codemirror

reactjs

react-codemirror