我正在为我的应用程序使用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仍然处于同一位置,如果我拖动相同类型的问题,例如:文本,则会发生这种情况。问题类型在问题对象中定义。
答案 0 :(得分:1)
对于您要呈现的任何列表,每个列表项都应该有一种方法来识别它(类似于数据存储在数据库中的方式,对吧?)。因此,您可以为每个问题设置一个id
属性(只要它们对每个问题都是唯一的,您的生成方式并不重要)。然后,您可以在使用react进行渲染时将该属性用作键。
答案 1 :(得分:0)
通过向组件添加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
之后更新数组索引时,也会更改渲染组件。