避免在react.js上點擊按鈕點擊

我對react.js很感興趣，並嘗試創建一個反應組件，以在按鈕單擊時從Python-Flask中創建的REST API呈現JSON響應。一切工作正常，但我正在導航到同一頁面再次輸出哪個表是不會持續。我們可以看到控制檯顯示導航回到同一頁面，該頁面重置組件的狀態。避免在react.js上點擊按鈕點擊

Snapshot of the console output shows the behavior

我的組件代碼：

var cols = [ 
    { key: 'id', label: 'Id' }, 
    { key: 'owner', label: 'Owner' },  
    { key: 'path', label: 'Path' }, 
    { key: 'description', label: 'Description' } 
]; 

class SearchForm extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {items: [], searchString: ''}; 
    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(event) { 
    this.setState({searchString: event.target.value}); 
    console.log(this.state.items); 
    } 

    handleSubmit(event) { 
    // alert('A name was submitted: ' + this.state.searchString); 
    // event.preventDefault(); 
    // this.getMoviesFromApiAsync(); 
    console.log(this.state.searchString); 
    this.getData(); 
    } 

    getData() { 
    // Todo: Append the searchstring to the URI 
    fetch("http://localhost:5000/search") 
     .then(response => response.json()) 
     .then(json => { 
     console.log("Inside request: "); 
     console.log(json.Data); 
     this.setState({ 
      items: json.Data 
     }); 
     console.log("after copy to state"); 
     console.log(this.state.items); 
     }); 
    } 

    generateRows() { 
     var cols = this.props.cols, // [{key, label}] 
      data = this.state.items; 
     console.log("Inside functions"); 
     console.log(data); 
      // console.log(data); 

     return data.map(function(item) { 
      // handle the column data within each row 
      var cells = cols.map(function(colData) { 

       // colData.key might be "firstName" 
       return <td key={colData.key}> {item[colData.key]} </td>; 
      }); 
      return <tr key={item.id}> {cells} </tr>; 
     }); 
    } 

    generateHeaders() { 
    var cols = this.props.cols; // [{key, label}] 

    // generate our header (th) cell components 
    return cols.map(function(colData) { 
     return <th key={colData.key}> {colData.label} </th>; 
    }); 
    } 

    render() { 
    var headerComponents = this.generateHeaders(), 
     rowComponents = this.generateRows(); 
    return (
     <div> 
     <form onSubmit={this.handleSubmit.bind(this)}> 
      <input type="text" value={this.state.searchString} onChange={this.handleChange.bind(this)} /> 
      <input type="submit" value="Search" /> 
     </form> 
     <br /> 
     <div class="table-responsive"> 
      <table class="table"> 
       <thead> {headerComponents} </thead> 
       <tbody> {rowComponents} </tbody> 
      </table> 
     </div> 
     </div> 
    ); 
    } 
} 
module.exports = SearchForm; 
const main = document.getElementById('main'); 
ReactDOM.render(<SearchForm cols={cols}/>, main);

來源

2017-03-05 Raghav Pandya

你不應該的形式本身（你已經做在構造函數中綁定）內需要this.handleSubmit.bind（本）。即使您取消註釋event.preventDefault，這是否仍然會發生？ –

非常感謝。我相信表單提交的默認事件是重定向到同一頁面。 –

這也是我的想法。這是否適合你？ –

格式化此作爲未來的參考答案。當使用表單時，表單提交的事件處理程序需要有

event.preventDefault()

爲了保持默認表單提交和重定向的發生。

Reference

來源

2017-03-05 04:42:33

其他選項包括['event.stopPropogation']（http://devdocs.io/dom/event/stoppropagation）及其堂兄['event.stopImmediatePropogation']（http://devdocs.io/dom/事件/ stopimmediatepropagation），取決於你需要什麼級別的控制Re事件冒泡。 –

感謝您的額外信息Josh H. –

避免在react.js上點擊按鈕點擊

回答

相關問題