1

ユーザーが SQL コードを入力できるプロジェクトで、django、react、react-codemirror2 を使用しています。textarea のテキストの一部のみが request.POST に存在するという問題が発生しています。ほとんどの場合、テキストエリアの最後の行の一部が送信されていることがわかりました。私は困惑しています。

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

1 に答える 1

1

CodeMirrorがフォームにあることを心配しないで、これを機能させました。代わりに、state を使用して CodeMirror onChange 関数から最後の値をキャプチャし、それをボタンの value 属性に割り当てました。テキストエリアにある name 属性を、ボタン自体にあるものに切り替えました。

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 に答える