避免在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上点击按钮点击

回答

相关问题