1
このpostを見ましたが、私の場合はどのように適用するのか分かりません。基本的に私は3-4の入力レンジバーを持っています、ユーザーが任意のスライダを変更した場合、他の2/3スライダは自動的に変更されます。バックエンドから取得している初期値。その後私は自分の状態に初期値を追加しました。そのために私はこの他のコンポーネントによる状態変更にDOMを再レンダリングする方法
ここで私の親コンポーネント
constructor(props){
super(props);
this.state ={
objectiveData:[]
}
var {objectiveData} = this.state;
this.props.objective_value.map((data,index) =>{
var newObj ={};
newObj['url'] = data.url;
newObj['name'] = data.name;
newObj['value'] = data.value;
newObj['pk'] = data.pk;
objectiveData[index] = newObj;
})
console.log("lcal",objectiveData)
this.setState({objectiveData});
}
updateValue = (obj) =>{
var {objectiveData} = this.state;
var selectedData = objectiveData.filter((data) => data.pk === obj.pk);
var diff=obj.value - selectedData[0].value;
var otherData = objectiveData.filter((data) => data.pk !== obj.pk);
var sum = otherData.map((data) =>(data.value)).reduce((a,b) => a + b,0);
console.log("sum",sum);
if(diff > 0){
for(var i=0;i < objectiveData.length;i++){
if(objectiveData[i].pk !== obj.pk){
console.log("object before value",objectiveData[i].value)
objectiveData[i].value = objectiveData[i].value - (objectiveData[i].value/sum);
console.log("object after value",objectiveData[i].value)
}else{
objectiveData[i].value = obj.value;
}
}
}else if(diff <0){
for(var i=0;i < objectiveData.length;i++){
if(objectiveData[i].pk !== obj.pk){
console.log("object before value plus",objectiveData[i].value)
objectiveData[i].value = objectiveData[i].value + (objectiveData[i].value/sum);
console.log("object before value minus",objectiveData[i].value)
}else{
objectiveData[i].value = obj.value;
}
}
}
return this.setState({objectiveData});
}
<MyInputRange maxValue={1} minValue={0} step={0.01}
updateProgramObjectiveValue={(value) => this.props.updateProgramObjectiveValue(value)}
value={data.value} objective_name={data.objective_name}
value_type={data.value_type} url={data.url} pk={data.pk}
updateValueLocally={this.updateValue.bind(this)}/>
は私の子コンポーネント
updateObjectiveValues = (value) =>{
this.props.updateValueLocally({"value":value,"pk":this.props.pk})
}
render(){
return(
<InputRange
maxValue={this.props.maxValue}
minValue={this.props.minValue}
step={this.props.step}
value={this.state.value}
onChange={this.updateObjectiveValues.bind(this)}
/>
)
}
あるしかし、私のスライダーを任意の場所でも、スライダーのユーザーmoves.soをしてください動いていないようなコードを書かれています私のコンポーネントを再レンダリングする方法を教えてください。基本的には、setState呼び出しが実行されるたびに反応する必要があります。私はここで腐っているのですか？ EDIT 1： クリスの答えに基づいて、私はこの方法
this.setState({objectiveData});
this.forceUpdate();
しかし、私は何が不足していないluck..amのように追加しましたか？
あなたはrenderメソッドに親コンポーネントの状態を使用していますか？私はそれが使用されて表示されません。 –