如何从表单提交中提升状态中的多个值？

Question

我的目标是获取输入值和单选输入的值，并在提交表单时将其状态提升到父组件App.js。我正在使用两个onChange事件，并且在提交表单时，值由app.js中的各个函数支撑和处理。那是问题所在，因为我需要将两个值参数传递给handleNote函数。我知道我在这里走错了路。预先感谢。

import React, { Component } from "react";
import "./styles.css";
import Header from "./Header";

//app.js

class App extends Component {

  handleColor = (value) => {
    this.setState({
      noteColor: value
    });
  };

  handleNote = (value) => {
    this.setState({
      noteTitle: value
      // noteColor: value,
    });
  };

  render() {
    return (
      <div>
        <Header handleNote={this.handleNote} handleColor={this.handleColor} />
      </div>
    );
  }
}

export default App;

import React, { Component } from "react";
import "./styles.css";

//Header.js

class Header extends Component {
  constructor() {
    super();
    this.state = {
      note: "",
      noteColor: "white"
    };
  }

  handleSubmit = e => {
    e.preventDefault();

    // lifting state to handleNote()
    this.props.handleNote(this.state.note);

    // have this.state.noteColor lift within handleNote()
    this.props.handleColor(this.state.noteColor);

    this.setState({
      note: ""
    });
  };

  handleChange = e => {
    this.setState({
      note: e.target.value
      // noteColor should be here
    });
  };

  handleColor = e => {
    this.setState({
      noteColor: e.target.value
    });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="name" className="sr-only">
          Type anything that you need to know for later...
        </label>
        <input
          type="text"
          name="note"
          placeholder={this.state.placeholder}
          onChange={this.handleChange}
          value={this.state.note}
          required
        />
        <div className="radio-container">
          <label htmlFor="yellow" className="sr-only">
            White
          </label>
          <input
            onChange={this.handleColor}
            type="radio"
            name="color"
            value="white"
            id="white"
          />

          <label htmlFor="yellow" className="sr-only">
            Yellow
          </label>
          <input
            onChange={this.handleColor}
            type="radio"
            name="color"
            value="yellow"
            id="yellow"
          />

          <label htmlFor="yellow" className="sr-only">
            Red
          </label>
          <input
            onChange={this.handleColor}
            type="radio"
            name="color"
            value="red"
            id="red"
          />

          <label htmlFor="yellow" className="sr-only">
            Green
          </label>
          <input
            onChange={this.handleColor}
            type="radio"
            name="color"
            value="green"
            id="green"
          />

          <label htmlFor="yellow" className="sr-only">
            Blue
          </label>
          <input
            onChange={this.handleColor}
            type="radio"
            name="color"
            value="blue"
            id="blue"
          />

          <label htmlFor="yellow" className="sr-only">
            Purple
          </label>
          <input
            onChange={this.handleColor}
            type="radio"
            name="color"
            value="purple"
            id="purple"
          />
        </div>
      </form>
    );
  }
}

export default Header;

Answer 1

您有点复杂。我会将其简化为这样的内容：

App.js

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

class App extends Component {
  handleNote = ({ note, noteColor }) => {
    console.log('note', note);
    console.log('notecolor', noteColor);
    this.setState({
      noteTitle: note,
      noteColor,
    });
  };

  render() {
    console.log('this.state', this.state);
    return (
      <div>
        <Header handleNote={this.handleNote} />
      </div>
    );
  }
}

export default App;

Header.js

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

class Header extends Component {
  constructor(props) {
    super(props);

    const initialState = {
      note: '',
      noteColor: 'white',
    }

    this.state = initialState;

    this.handleChange.bind(this);
  }

  handleChange = ({ target: { name, value } }) => {
    this.setState({
      [name]: value,
    });
  };

  render() {
    return (
      <form
        onSubmit={e => {
          e.preventDefault();
          this.props.handleNote(this.state);

          // reset local state
          this.setState(initialState);
        }}
      >
        <label htmlFor="name" className="sr-only">
          Type anything that you need to know for later...
        </label>
        <input
          type="text"
          name="note"
          placeholder={this.state.placeholder}
          onChange={this.handleChange}
          value={this.state.note}
          required
        />
        <div className="radio-container">
          <label htmlFor="yellow" className="sr-only">
            White
          </label>
          <input
            onChange={this.handleChange}
            type="radio"
            name="noteColor"
            value="white"
            id="white"
          />

          <label htmlFor="yellow" className="sr-only">
            Yellow
          </label>
          <input
            onChange={this.handleColor}
            type="radio"
            name="color"
            value="yellow"
            id="yellow"
          />

          <label htmlFor="yellow" className="sr-only">
            Red
          </label>
          <input
            onChange={this.handleColor}
            type="radio"
            name="color"
            value="red"
            id="red"
          />

          <label htmlFor="yellow" className="sr-only">
            Green
          </label>
          <input
            onChange={this.handleColor}
            type="radio"
            name="color"
            value="green"
            id="green"
          />

          <label htmlFor="yellow" className="sr-only">
            Blue
          </label>
          <input
            onChange={this.handleColor}
            type="radio"
            name="color"
            value="blue"
            id="blue"
          />

          <label htmlFor="yellow" className="sr-only">
            Purple
          </label>
          <input
            onChange={this.handleColor}
            type="radio"
            name="color"
            value="purple"
            id="purple"
          />
        </div>
      </form>
    );
  }
}

export default Header;

Answer 2

当前，您已经创建了handleSubmit函数并将其分配给窗体上的onSubmit，但是没有任何东西可以启动该函数。加 <button type="submit">Click me</button>的形式来触发handleSubmit。

Answer 3

import React, { Component } from "react";
import "./styles.css";
import Header from "./Header";

//app.js

class App extends Component {


  handleNote = (title,color) => {
    this.setState({
      noteTitle: title
      noteColor: color,
    });
  };

  render() {
    return (
      <div>
        <Header handleNote={this.handleNote} />
      </div>
    );
  }
}

export default App;

import React, { Component } from "react";
import "./styles.css";

//Header.js

class Header extends Component {
  constructor() {
    super();
    this.state = {
      note: "",
      noteColor: "white"
    };
  }

  handleSubmit = e => {
    e.preventDefault();

    // lifting state to handleNote()
    this.props.handleNote(this.state.note,this.state.noteColor);
    this.setState({
      note: ""
    });
  };


  handleChange = (name,e) => {
    this.setState({
      [name]: e.target.value
    });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="name" className="sr-only">
          Type anything that you need to know for later...
        </label>
        <input
          type="text"
          name="note"
          placeholder={this.state.placeholder}
          onChange={(e)=>this.handleChange("note",e)}
          value={this.state.note}
          required
        />
        <div className="radio-container">
          <label htmlFor="yellow" className="sr-only">
            White
          </label>
          <input
            onChange={(e)=>this.handleChange("noteColor",e)}
            type="radio"
            name="color"
            value="white"
            id="white"
          />

          <label htmlFor="yellow" className="sr-only">
            Yellow
          </label>
          <input
            onChange={(e)=>this.handleChange("noteColor",e)}
            type="radio"
            name="color"
            value="yellow"
            id="yellow"
          />

          <label htmlFor="yellow" className="sr-only">
            Red
          </label>
          <input
            onChange={(e)=>this.handleChange("noteColor",e)}
            type="radio"
            name="color"
            value="red"
            id="red"
          />

          <label htmlFor="yellow" className="sr-only">
            Green
          </label>
          <input
            onChange={(e)=>this.handleChange("noteColor",e)}
            type="radio"
            name="color"
            value="green"
            id="green"
          />

          <label htmlFor="yellow" className="sr-only">
            Blue
          </label>
          <input
            onChange={(e)=>this.handleChange("noteColor",e)}
            type="radio"
            name="color"
            value="blue"
            id="blue"
          />

          <label htmlFor="yellow" className="sr-only">
            Purple
          </label>
          <input
            onChange={(e)=>this.handleChange("noteColor",e)}
            type="radio"
            name="color"
            value="purple"
            id="purple"
          />
        </div>
      </form>
    );
  }
}

export default Header;