0

アプリケーションに React と Redux を使用しています。コンポーネントの位置が更新されない同じタイプの質問をドラッグすると、動的フォームがあります。ドラッグにはJqueryUI Sortableを使用しています

私の質問オブジェクト:

var questions : [
  {"name" : "Question Title", "title" : "Question Title", "type" : "text"},
  {"name" : "Question Title", "title" : "Question Title", "type" : "text"}
]

React コンポーネント

class SingleTextQuestion extends React.Component{
    constructor(props){
        super(props)

    }
    componentDidMount(){
        let draggableFunction = new utilityFunction();
        draggableFunction.addDraggableFeature('divQuestion_container');
    }
    render(){
        //create span or textbox based upon edit mode
        let element = Symbol();

        element = (<QuestionTitle questionNumber={this.props.questionNumber} data={this.props.data} key={this.props.key} />)


        return (
            <div id={"div_"+this.props.questionNumber} className="div_commonId" key={this.props.key}>
                <div className='icons_parent'>
                    <DragIcon />
                    <DeleteButon questionNumber={this.props.questionNumber} />
                </div>
                <div id={"q_no_title_"+this.props.questionNumber} className="q_no_title_class">
                    <QuestionNumber questionNumber={this.props.questionNumber}/>
                    <div id={"title_q"+this.props.questionNumber} className="question-title">
                        {element}
                    </div>
                </div>
                <div id={"typeDiv_"+this.props.questionNumber}>
                        <input id={"optionTypeElem_0_"+this.props.questionNumber}/>
                </div>
            </div>
        )
    }
}

質問タイトル コンポーネント

class QuestionTitle extends React.Component{
    constructor(props){
        super(props)
        this.showTextBox = this.showTextBox.bind(this)
    }
    showTextBox(content, id, type, choiceIndex){
        if(type != 'image'){
            this.props.showTextBox(content, id, type, choiceIndex);
        }
    }
    render(){
        return(
            <span id={"title_"+this.props.questionNumber} 
            onClick={this.showTextBox.bind(this,  this.props.data.title , 
                'title_'+this.props.questionNumber, 'question_title', null)} >
                {this.props.data.title}
            </span>
        )
    }
}

質問のタイトルのテキストを変更すると、状態が更新され、タイトルが変更されます。質問を 2 から 1 にドラッグすると、質問配列も更新されます。

var questions : [
  {"name" : "Question Title", "title" : "Question Title Changed", "type" : "text"},
  {"name" : "Question Title", "title" : "Question Title", "type" : "text"}
]

質問 2 は同じ位置に残ります。これは、同じタイプの質問 (テキストなど) をドラッグすると発生しました。質問のタイプは質問オブジェクトで定義されます。

4

2 に答える 2

1

レンダリングするリストの場合、各リスト項目にはそれを識別する方法が必要です (データがデータベースに保存される方法と同様ですよね?)。そのため、各質問にプロパティを設定できますid(質問ごとに一意である限り、どのように生成するかは問題ではありません)。次に、react を使用してそれらをレンダリングするときに、そのプロパティをキーとして使用できます。

于 2016-12-11T12:46:43.867 に答える
0

コンポーネントにa を追加するkeyことで、問題は解決されます。

オブジェクトを作成するときに、データにキーを追加しました

var questions : [
  {"name" : "Question Title", "title" : "Question Title", "type" : "text", "key_rand" : 123},
  {"name" : "Question Title", "title" : "Question Title", "type" : "text", "key_rand" : 223}
]

したがって、ドラッグ後に配列インデックスを更新するたびにkey_rand、コンポーネントをレンダリングするものも変更されます。

于 2016-12-11T13:07:21.123 に答える