0

我在我的应用程序中使用 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 保持在原来的位置，如果我拖动相同类型的问题，例如：文本，就会发生这种情况。问题类型在问题对象中定义。

4

2 回答 2

1

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

于 2016-12-11T12:46:43.867 回答
0

通过向key组件添加 a ，问题就解决了。

创建对象时，我在数据中附加了一个键

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 回答