javascript - React : Click text,动态附加表单并用它来重命名文本

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 代码......(不完全确定如何使用 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')
)