1

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

反应组件

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>
4

1 回答 1

1

通过不担心 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
于 2018-03-30T18:40:00.903 回答