反应:单击文本，动态附加表单并使用它来重命名文本

Question

我想知道如何使用 React 编写执行以下操作的代码.js 我草拟了一个JQuery示例来演示我想要的东西：

http://jsfiddle.net/k3j7u6zv/

let form = " <form class='update-name'> <input type='text' class='room-new-name'> <input type='submit'> </form>"
$(".room-name").on("click",function(){
let parent = $(this).parent()
parent.append(form)
})

$(".room").on("submit",function(event){
event.preventDefault()

let newName = $(".room-new-name").val()
$(".room-name").text(newName)
$(".room > .update-name").remove()
})

反应代码....(不确定如何使用 React 来思考这个问题(

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
rooms:[{name:"coffee talk"},{name:"cooking"},{name:"skateboarding"},{name:"coding"}]
}
}
changeName(){
// ?
}
render() {
let roomList = this.state.rooms.map((val,index)=>{
return <li key={index}>{val.name}</li> 
})
return (
<div>
<ul>
{roomList}
</ul>  
</div>
);
}
}
ReactDOM.render(
<div>
<App/>
</div>,
document.getElementById('root')
)

Answer 1

我想我想通了这一点，但我不确定这是"最佳实践"还是接近它。

http://jsfiddle.net/od6ces0a/1/

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
rooms:[{name:"coffee talk"},{name:"cooking"},{name:"skateboarding"},{name:"coding"}],
roomCSS:{display:"none"},
selectedRoomIndex:undefined,
tempName:"",
}
}
setRoomIndex=(roomID)=>{
console.log(roomID);
this.setState({
selectedRoomIndex:roomID,
roomCSS:{display:"block"}
})
}

handleChange=(event)=> {
this.setState({tempName: event.target.value});
}

setNewRoomName=(event)=>{
event.preventDefault()
let updatedRoomList = this.state.rooms.map((val,index)=>{
if(index === this.state.selectedRoomIndex){
val.name = this.state.tempName;
return val
}else{
return val
}
})

this.setState({
rooms:updatedRoomList,
roomCSS:{display:"none"},
tempName:""
})
}

render() {

let roomList = this.state.rooms.map((val,index)=>{
return <li onClick = {()=>this.setRoomIndex(index)} key={index}>
<span>{val.name}</span>
</li> 
});
return (
<div>
<ul>
<form onSubmit={this.setNewRoomName} className="change-room-name" style={this.state.roomCSS}> 
<input type="text" onChange = {this. handleChange} value={this.state.tempName}/> 
<input type="submit"/>
</form>
{roomList}
</ul>  
</div>
);
}
}
ReactDOM.render(
<div>
<App/>
</div>,
document.getElementById('root')
)