javascript - 当我点击提交 ReactJS 时页面刷新

Question

我一直在尝试实现一个将数据从子组件传递到父组件的场景。

我能够通过它，但由于使用了表单，屏幕不会持续存在。我想知道如何在使用表单时实现它。

import React, { Component } from 'react';
import './App.css';

class FormComponent extends React.Component {
  render() {
    return (
      <form>
        <input type="text" name="caption" value={this.props.caption} onChange={(event) => this.props.changeCaption(event.target.value)} />
        <button onClick={this.props.onClick}>Add</button>
      </form>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      caption: ""
    }
  }

  changeCaption = (caption) => {
    this.setState({
      caption: caption
    })
  }

  handleClick = () => {
    console.log('Send to the list component', this.state.caption);
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <FormComponent 
            onClick={this.handleClick}
            caption={this.state.caption}
            changeCaption={this.changeCaption}
          />
        </header>
      </div>
    );
  }
}

export default App;

我真的很感激一些帮助。谢谢。

Answer 1

未经测试很难判断，但让我猜测它与提交时表单标记的“正常”行为有关......

然后你必须防止事件冒泡，试试这个:

 handleClick = (e) => {
  e.preventDefault();
  console.log('Send to the list component', this.state.caption);
 }