ReactJS: yếu tố thay đổi onClick

Question

Tôi vừa mới bắt đầu học React và có một câu hỏi.

Tôi muốn làm như sau:

Nếu người dùng nhấp vào một đoạn tôi muốn thay đổi yếu tố để một lĩnh vực đầu vào có các nội dung của đoạn văn điền sẵn. (Mục tiêu cuối cùng là chỉnh sửa trực tiếp nếu người dùng có các đặc quyền nhất định)

Tôi đến đây nhưng hoàn toàn thua lỗ.

var AppHeader = React.createClass({ 
    editSlogan : function(){ 
     return (
      <input type="text" value={this.props.slogan} onChange={this.saveEdit}/> 
     ) 
    }, 
    saveEdit : function(){ 
     // ajax to server 
    }, 
    render: function(){ 
     return (
      <header> 
       <div className="container-fluid"> 
        <div className="row"> 
         <div className="col-md-12"> 
          <h1>{this.props.name}</h1> 
          <p onClick={this.editSlogan}>{this.props.slogan}</p> 
         </div> 
        </div> 
       </div> 
      </header> 
     ); 
    } 
}); 

Làm cách nào để ghi đè hiển thị từ chức năng editSlogan?

Answer 1

Nếu tôi hiểu chính xác câu hỏi của bạn, bạn muốn kết xuất một yếu tố khác trong trường hợp có sự kiện "bật".

Đây là trường hợp sử dụng tuyệt vời cho các trạng thái phản ứng.

Lấy ví dụ sau

React.createClass({ 
    getInitialState : function() { 
     return { showMe : false }; 
    }, 
    onClick : function() { 
     this.setState({ showMe : true}); 
    }, 
    render : function() { 
     if(this.state.showMe) { 
      return (<div> one div </div>); 
     } else { 
      return (<a onClick={this.onClick}> press me </a>); 
     } 
    } 
}) 

Điều này sẽ thay đổi trạng thái thành phần, và làm cho Phản ứng làm cho div thay cho một-tag. Khi một trạng thái thành phần bị thay đổi (sử dụng phương thức setState), React tính toán nếu nó cần phải tự quay lại, và trong trường hợp đó, các thành phần nào của thành phần cần thiết phải lập lại.

Thông tin thêm về tiểu bang https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html