Reactjs 子组件可以将值发送回父表单吗

发布于01月13日

InputField&amp；Button是进入表单以创建表单的自定义组件.我的问题是如何将数据发送回表单，以便在单击按钮时，可以在表单上使用数据(用户名和密码)启动ajax:

export default auth.authApi(
  class SignUpViaEmail extends Component{

    constructor(props){
      super(props);
      this.state = {
        email : "",
        password : ""
      };
      this.storeEmail = this.storeEmail.bind( this );
      this.storePassword = this.storePassword.bind( this );
    }

    storeEmail(e){
      this.setState({ email : e.target.value });
    }

    storePassword(e){
      this.setState({ password : e.target.value });
    }

    handleSignUp(){
      this.props.handleSignUp(this.state);
    }

    render(){
      return(
        <div className="pageContainer">

          <form action="" method="post">
            <InputField labelClass = "label"
                        labelText = "Username"
                        inputId = "signUp_username"
                        inputType = "email"
                        inputPlaceholder = "registered email"
                        inputClass = "input" />
            <Button btnClass = "btnClass"
                    btnLabel = "Submit"
                    onClickEvent = { handleSignUp } />
          </form>
        </div>
      );
    }

  }
);

还是不推荐&amp；我不应该在表单中创建自定义子组件？

child component => InputField

import React,
       { Component } from "react";

export class InputField extends Component{

  constructor( props ){
    super( props );
    this.state = {
      value : ""
    };
    this.onUserInput = this.onUserInput.bind( this );
  }

  onUserInput( e ){
    this.setState({ value : e.target.value });
    this.props.storeInParentState({[ this.props.inputType ] : e.target.value });
  }

  render(){
    return  <div className = "">
              <label htmlFor = {this.props.inputId}
                     className = {this.props.labelClass}>
                {this.props.labelText}
              </label>
              <input id = {this.props.inputId}
                     type = {this.props.inputType}
                     onChange = {this.onUserInput} />
              <span className = {this.props.validationClass}>
                { this.props.validationNotice }
              </span>
            </div>;
  }
}

Error : I get the error 100 on the parent storeEmail func.

class Parent extends Component { constructor() { this.state = { value: '' }; } //... handleChangeValue = event => this.setState({value: event.target.value}); //... render() { return ( <Child value={this.state.value} onChangeValue={this.handleChangeValue} /> ); } } class Child extends Component { //... render() { return ( <input type="text" value={this.props.value} onChange={this.props.onChangeValue} /> ); } }

class Parent extends Component { //... handleChangeListValue = index => event => { this.setState({ list: this.state.list .map((element, i) => i === index ? event.target.value : element) }); } //... render() { return this.state.list.map((element, i) => ( <Child value={element} onChangeValue={this.handleChangeListValue(i)} /> ));

Reactjs 子组件可以将值发送回父表单吗

推荐答案

Reactjs相关问答推荐

重定向React路由中没有根文件夹的所有路径匹配

如何使用react-router-dom导航到网页中的其他路由？

呈现组件元素(MAP)中的问题

使用Thattle和Use Effect setTimeout进行搜索有什么不同

在Next.js中实现动态更改的服务器组件

如何在NextJS中仅在刷新页面和页面淡出页面过渡时添加全屏加载器

如何清除过滤器搜索的状态

如何在 TimePicker 中更改时钟 colored颜色和确定按钮字体 colored颜色 - MUI React

是的验证：使用 useFieldArray 访问表单值

当`useSelector`回调中的属性值更新时，将会使用更新后的值吗？

如何在 React.js 中提取 PDF 的内容？

使用 MuiCssBaseline 在所有 MUI v5 标签上设置边距 0

Material UI v5.11 - Prop sx 在响应式中写了两次

为什么接受 useState 返回的函数的 setter 在使用 React 的单个调用中执行两次？

我刚刚部署了我的 Vite React 站点，但我的图标/图像没有部署

谁能根据经验提供有关 useEffect 挂钩的更多信息

使用 useRef(uuid()) 的目的是什么？

将 dict 值转换并插入到react 钩子的列表中

无法有条件地更新useEffect中的setState

为什么 state redux-toolkit 是代理？