Question

我有一些组件，每个组件都包含输入，在主组件上我有一个按钮，可以将所有信息一次性发送到服务器。问题是具有按钮的主要组件没有子组件的输入内容。

在过去，我传递了一种将内容重新发送到状态的方法，但这样做是否更容易让人痛苦？这只是一种奇怪的方式。

这是我所拥有和我的意思的简短例子。

主要组成部分：

＆＃13;

import React from 'react';
import { Button } from 'react-toolbox/lib/button';

import Message from './Message';


class Main extends React.Component {
  constructor() {
    super();
    this.state = { test: '' };
  }
  render() {
    return (
      <div className="container mainFrame">
        <h2>Program</h2>
        <Message />

      </div>
    );
  }
}

export default Main;

＆＃13;

消息组件：

＆＃13;

import React from 'react';
import axios from 'axios';
import Input from 'react-toolbox/lib/input';

class Message extends React.Component {
  constructor() {
    super();
    this.state = { message: '' };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(value) {
    this.setState({ message: value });
  }

  render() {
    return (
      <Input
        type="text"
        label="Message"
        name="name"
        onChange={this.handleChange}
      />
    );
  }
}

export default Message;

＆＃13;

Answer 1

回答你的问题，是的。您可以尝试使用refs。将ref添加到Message组件，您将能够访问子组件的方法，状态和所有内容。但这不是传统方式，人们通常使用callbacks，如前所述。

import React from 'react';
import { Button } from 'react-toolbox/lib/button';

import Message from './Message';


class Main extends React.Component {
  constructor() {
    super();
    this.state = { test: '' };
  }
   
  clickHandler () {
    let childState = this.refs.comp1.state //returns the child's state. not prefered.
    let childValue = this.refs.comp1.getValue(); // calling a method that returns the child's value
  }

  render() {
    return (
      <div className="container mainFrame">
        <h2>Program</h2>
        <Message ref="comp1"/>
        <Button onClick={this.clickHandler} />
      </div>
    );
  }
}

export default Main;

import React from 'react';
import axios from 'axios';
import Input from 'react-toolbox/lib/input';

class Message extends React.Component {
  constructor() {
    super();
    this.state = { message: '' };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(value) {
    this.setState({ message: value });
  }
  
  getValue () {
    return this.state.message;
  }

  render() {
    return (
      <Input
        type="text"
        label="Message"
        name="name"
        onChange={this.handleChange}
      />
    );
  }
}

export default Message;

Answer 2

你正在做的建议in docs所以这是一个好方法。

我有一个按钮，可以将所有信息一次性发送到服务器

我假设你可以使用form。如果是这样，您只需处理onSubmit事件并创建包含所有嵌套输入字段名称及其值的FormData对象（即使在子组件中）。那时不需要回调。

handleSubmit(e){
  e.preventDefault();
  const form = e.currentTarget;
  const formData = new FormData(form); // send it as a body of your request

  // form data object will contain key value pairs corresponding to input `name`s and their values.    
}

checkout Retrieving a FormData object from an HTML form

反应组件结构并向上传递状态

2 个答案: