Fatal编程技术网
  • javascript/
  • Javascript 如何从表单提交中提升状态中的多个值？

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

javascript reactjs

Javascript 如何从表单提交中提升状态中的多个值？,javascript,reactjs,state,Javascript,Reactjs,State,我的目标是在提交表单时获取输入值和无线电输入值，并将它们的状态提升到父组件App.js。我使用了两个onChange事件，当表单提交时，值由app.js中的单个函数支持和处理。这就是问题所在，因为我需要将两个值参数传递给handleNote函数。我知道我走错了路。提前谢谢 import React, { Component } from "react"; import "./styles.css"; import Header from "./H

我的目标是在提交表单时获取输入值和无线电输入值，并将它们的状态提升到父组件
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}来自“React”；
导入“/styles.css”；
从“/Header”导入标题；
//app.js
类应用程序扩展组件{
handleColor=（值）=>{
这是我的国家({
注颜色：值
});
};
handleNote=（值）=>{
这是我的国家({
注：价值
//注颜色：值，
});
};
render（）{
返回(
);
}
}
导出默认应用程序；

import React，{Component}来自“React”；
导入“/styles.css”；
//Header.js
类头扩展组件{
构造函数（）{
超级（）；
此.state={
注：“，
注颜色：“白色”
};
}
handleSubmit=e=>{
e、 预防默认值（）；
//提升状态至handleNote（）
this.props.handleNote（this.state.note）；
//在handleNote（）中使用this.state.noteColor提升
this.props.handleColor（this.state.noteColor）；
这是我的国家({
注：“”
});
};
handleChange=e=>{
这是我的国家({
注：e.target.value
//注意颜色应该在这里
});
};
handleColor=e=>{
这是我的国家({
注颜色：e.target.value
});
};
render（）{
返回(
键入以后需要知道的任何内容。。。
白色
黄色的
红色
绿色
蓝色
紫色
);
}
}
导出默认标题；
当前已创建handleSubmit函数并将其分配给表单上的onSubmit，但没有任何内容启动该函数。添加 
点击表单中的me
触发handleSubmit。

导入React，{Component}从“React”开始；

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;


导入“/styles.css”；
从“/Header”导入标题；
//app.js
类应用程序扩展组件{
handleNote=（标题、颜色）=>{
这是我的国家({
标题：标题
注颜色：颜色，
});
};
render（）{
返回(
);
}
}
导出默认应用程序；
从“React”导入React，{Component}；
导入“/styles.css”；
//Header.js
类头扩展组件{
构造函数（）{
超级（）；
此.state={
注：“，
注颜色：“白色”
};
}
handleSubmit=e=>{
e、 预防默认值（）；
//提升状态至handleNote（）
this.props.handleNote（this.state.note，this.state.noteColor）；
这是我的国家({
注：“”
});
};
handleChange=（名称，e）=>{
这是我的国家({
[名称]：e.target.value
});
};
render（）{
返回(
键入以后需要知道的任何内容。。。
this.handleChange（“note”，e）}
值={this.state.note}
必修的
/>
白色
this.handleChange（“noteColor”，e）}
type=“无线电”
name=“color”
value=“白色”
id=“白色”
/>
黄色的
this.handleChange（“noteColor”，e）}
type=“无线电”
name=“color”
value=“黄色”
id=“黄色”
/>
红色
this.handleChange（“noteColor”，e）}
type=“无线电”
name=“color”
value=“红色”
id=“红色”
/>
绿色
this.handleChange（“noteColor”，e）}
type=“无线电”
name=“color”
value=“绿色”
id=“绿色”
/>
蓝色
this.handleChange（“noteColor”，e）}
type=“无线电”
name=“color”
value=“蓝色”
id=“蓝色”
/>
紫色
this.handleChange（“noteColor”，e）}
type=“无线电”
name=“color”
value=“紫色”
id=“紫色”
/>
);
}
}
导出默认标题；
你把事情复杂化了一点。我会把它简化成这样：

App.js 
import React，{Component}来自'React'；
导入“./styles.css”；
从“./头”导入头；
类应用程序扩展组件{
handleNote=（{note，noteColor}）=>{
console.log（'note'，note）；
console.log（'notecolor'，notecolor）；
这是我的国家({
注：注：，
注意颜色，
});
};
render（）{
console.log（'this.state'，this.state）；
返回(
);
}
}
导出默认应用程序；
Header.js 
import React，{Component}来自'React'；
导入“./styles.css”；
类头扩展组件{
建造师（道具）{
超级（道具）；
常量初始状态={
注：''，
注颜色：'白色'，
}
this.state=初始状态；
这个.handleChange.bind（这个）；
}
handleChange=（{target:{name，value}}）=>{
这是我的国家({
[名称]：值，
});
};
render（）{
返回(
{
e、 预防默认值（）；
this.props.handleNote（this.state）；
//重置本地状态
此.setState（初始状态）；
}}
>
键入以后需要知道的任何内容。。。
白色
黄色的

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;



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;



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;