Question

我是react.js的新手，并尝试创建一个react组件，以便在按钮点击时从Python-Flask中创建的REST API呈现json响应。一切正常，但我再次导航到同一页面，输出是一个表不会持续。我们可以看到控制台显示导航回到同一页面，这会重置组件的状态。

How to get all properties values of a Javascript Object (without knowing the keys)?

我的组件代码：

    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);

Answer 1

将其格式化为将来参考的答案。使用表单时，表单提交的事件处理程序需要

event.preventDefault()

以保持默认表单提交和重定向发生。

Reference

单击按钮时避免在react.js中导航

1 个答案: