0
私はここ数日からReactJSを学習しています。ループを介して要素を描画するという特定の問題が発生しました。我々は 要素のループをレンダリングするときの反応のインデックス化
<Post key = {index} ..... removeItem = {() => props.removeItem(index)}/>
とで
ポスト機能ブロックを持っている私たちは PostList機能ブロックでを提供
PostListブロックから
removeItem関数を呼び出しているとき
このスクリプトは正常に動作し、問題にいくつかの光を投げてください。私たちは持っています
<PostButton label = "x" handleClick = {props.removeItem}/>
私はこれを渡す場合ブロックへ機能と我々が持っている私たちはポスト機能ブロックに
<Post key = {index} ..... removeItem = {props.removeItem}/>
と
を持ってPostList機能ブロックで
のような関数を呼び出す
<PostButton label = "x" handleClick = {() => props.removeItem(props.key)}/>
Wrong Implemented Code その後、いくつかのバグが発生するアイテムの値が正しくありません。削除ボタンがクリックされたアイテムは削除されていませんが、削除されたアイテムは削除されます。私は、postList変数から要素を削除すると、2番目のケースではインデックスに影響しますが、最初のケースではpostListを再度レンダリングすることによって適切に処理されたと考えられます。 は、誰かがループを介してそれらをレンダリング中の要素を処理している間は
function PostButton(props){
var style = {
width:24,
height:24
}
return (
<button style = {style} onClick = {() => props.handleClick()}>{props.label}</button>
)
}
function PostText(props){
var style = {
border:"1px solid black",
width: props.width
}
return (
<div style = {style}>{props.text}</div>
)
}
function Post(props){
var style = {
display:"flex"
}
return (
<div style = {style}>
<PostButton label = "x" handleClick = {props.removeItem}/>
<PostText text = {props.title} width = "200"/>
<PostButton label = "+" handleClick = {props.incrementScore}/>
<PostText text = {props.score} width = "20"/>
<PostButton label = "-" handleClick = {props.decrementScore}/>
</div>
)
}
function PostList(props){
return (
<ol>
{
props.postList.map((item,index) =>
<Post key = {index}
title = {item.title}
score = {item.score}
incrementScore = {() => props.updateScore(index,1)}
decrementScore = {() => props.updateScore(index,-1)}
removeItem = {() => props.removeItem(index)}
/>
)
}
</ol>
)
}
class App extends React.Component{
constructor(props){
super(props)
this.state = {value:"", items : []}
}
handleChange(event){
this.setState({value:event.target.value})
}
addItem(){
var itemsCopy = this.state.items.slice()
var truncatedString = this.state.value.substring(0,20);
itemsCopy.push({"title":truncatedString,"score":0})
itemsCopy.sort((a,b)=>{
return b.score - a.score;
})
this.setState({items:itemsCopy,value:""})
}
removeItem(index){
var itemsCopy = this.state.items.slice()
itemsCopy.splice(index,1);
itemsCopy.sort((a,b) => {
return b.score - a.score
})
this.setState({items:itemsCopy})
}
updateScore(index,val){
var itemsCopy = this.state.items.slice()
itemsCopy[index].score += val
itemsCopy.sort((a,b) => {
return b.score - a.score
})
this.setState({items:itemsCopy})
}
render(){
return (
<div>
<input value = {this.state.value} onChange = {this.handleChange.bind(this)}/>
<button onClick = {() => this.addItem()}>Submit</button>
<PostList postList = {this.state.items}
updateScore = {this.updateScore.bind(this)}
removeItem = {this.removeItem.bind(this)}
/>
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById("root")
)<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id="root"></div>