Question

我正在为我的应用程序使用React和Redux。当我拖动相同类型的问题时，我有一个动态表单，我的组件位置不会更新。拖动我正在使用JqueryUI Sortable

我的问题对象：

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

反应组件

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仍然处于同一位置，如果我拖动相同类型的问题，例如：文本，则会发生这种情况。问题类型在问题对象中定义。

Answer 1

对于您要呈现的任何列表，每个列表项都应该有一种方法来识别它（类似于数据存储在数据库中的方式，对吧？）。因此，您可以为每个问题设置一个id属性（只要它们对每个问题都是唯一的，您的生成方式并不重要）。然后，您可以在使用react进行渲染时将该属性用作键。

Answer 2

通过向组件添加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之后更新数组索引时，也会更改渲染组件。

React组件不会更新

2 个答案: