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

如果您不想在点击时提交表单，则可以向按钮添加type="button"属性：

<button type="button" onClick={this.props.onClick}>Add</button>

Answer 2

未经测试很难说，但让我猜想它是提交时表单标签的“正常”行为的链接...。

然后，您必须防止事件冒泡，请尝试以下操作：

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

单击提交ReactJS时页面刷新

2 个答案: