Question

我有点难过这个简单的问题！我想简单地获取表单数据，验证它，提交它并向Express API提交发布请求。但在此之前，我并不认为我对如何实现这一目标有透彻的了解。我查看了this问题和these以及其他一些问题，但我不确定这是最好的方法。

这就是我假设的方式：

我为注册页面创建了一个React组件。（简化用于演示）

document.write

单击按钮时，将触发OnSubmit（）函数，在该函数中将传递JSON数据。

class SignupForm extends Component {
    constructor(props){
        super(props);
        this.onSubmit = this.onSubmit.bind(this);
    }
    onSubmit(val){
        debugger;
    }
    render(){
        return (
            <form onSUbmit={ (e)=> this.onSubmit(e) }>
                <input type="text" />
                <label></label>
                <button type="submit">Submit</button>
            </form>
        )
    }
}

我可以触发我的动作{ "name": "Kanye", "surname": "West", "email":"yeezy@goodmusic.com", "password":"notsurehowthiswillwork" }，它将对我的API进行AJAX调用，然后更新我的减速器。

在使用react-redux-form或redux-form等库时，混淆倍增。我只想简单地为SignupAction()，name surname和email创建一个模型或类似内容，但我觉得这些库一旦开始拥有就会过度设计他们自己的减速机如：

password

我的其他选项是：

const store = createStore(combineForms({
   user: initialUser,
}));

但是，我的问题是......这会影响效果，如果是这样的话为什么？

Answer 1

处理表单非常简单：

class UserInfo extends React.Component {

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    
    const formData = {};
    for (const field in this.refs) {
      formData[field] = this.refs[field].value;
    }
    console.log('-->', formData);
  }

  render() {
    return (
        <div>
          <form onSubmit={this.handleSubmit}>
            <input ref="phone" className="phone" type='tel' name="phone"/>
            <input ref="email" className="email" type='tel' name="email"/>
            <input type="submit" value="Submit"/>
          </form>
        </div>
    );
  }
}

export default UserInfo;

Answer 2

我建议使用redux-form。它为您提供以下选项：

输入验证
输入上的不同类型，包括日期和文件上传
提供一个onSubmit方法，在验证成功后调用该方法（这是您调度操作以调用API并更新状态的时间点）

但如果仍然不想使用（我强烈建议使用它），你可以做的就是在表单上提交只需验证你的数据并在你的容器中发送一个动作。因此，将您的数据作为参数从组件传递到容器，在那里您发送一个动作调用post / put API（以redux形式，您不需要传递任何东西，您可以直接从商店读取）。

    onSubmit(val){
        debugger;
    }
    render(){
        const { onSubmit } = this.props //pass onSubmit from 
        return (
            <form onSubmit={ (e)=> {onSubmit} ) }>
                <input type="text" />
                <label></label>
                <button type="submit">Submit</button>
            </form>
        )
    }
}

<强>集装箱：

mapDispatchToProps(dispatch){
   return {
    onSubmit => {
     //dispatch action
     }
  }

使用React Redux提交FORM数据的最佳方式？

2 个答案: