代码之家  ›  专栏  ›  技术社区  ›  Nag

form-React中的多个输入元素

  •  0
  • Nag  · 技术社区  · 5 年前

    有人能告诉我这个密码有什么问题吗? onSubmit在只有一个输入元素时工作,但在有多个输入元素时不工作!

        class ReactForm extends React.Component{
    
        constructor(props){
        super(props);
        this.handleChange=this.handleChange.bind(this);
        this.validate=this.validate.bind(this);
    
         this.state={
          name:'',
          email:''
         };
       }
    
      handleChange(event){
    event.preventDefault();
     const name = event.target.name;
     const value = event.target.value;
     this.setState({
    
       [name]:value
    
        });
    
     }
    
     validate(event){
       event.preventDefault();
       console.log(this.state);
    
      }
    
    render(){
    
    return (
    
      <div>
       <form onSubmit={this.validate}>
      <div>
         <input type="text" name="name" value={this.state.name} onChange={this.handleChange}/>
         <input type="email" name="email" value={this.state.email} onChange={this.handleChange}/>
      </div>
    
    
    </form>
    </div>
    );
    
    }
    
    
       }
    
    
    
     ReactDOM.render(
    
        <ReactForm />,
    
    document.getElementById("root")
    
        )
    
    3 回复  |  直到 5 年前
        1
  •  1
  •   hiddenuser.2524    5 年前

    如果有多个输入,则需要有“提交”按钮,如果需要,可以添加隐藏按钮:

    <input type="submit" hidden />
    

    这是一个代码沙盒: https://codesandbox.io/s/suspicious-almeida-e3f00

    下面是详细的解释: Why does a FORM with one text INPUT submit on enter while one with two text INPUTs does not?

        2
  •  0
  •   Yash Joshi    5 年前

    我真的很喜欢都铎王朝的做法。

    FormData 访问表单值。

    new FormData(e.target);
    

    以下是工作沙盒链接: https://codesandbox.io/s/long-wind-ybl1w

    希望这有帮助!

        3
  •  0
  •   Harshit    5 年前

    type="submit" 提交!

    它会起作用的!