Cách tốt nhất để gửi dữ liệu MẪU với React Redux?

Question

Tôi là loại stumped về vấn đề này đơn giản! Tôi chỉ muốn lấy dữ liệu biểu mẫu của mình, xác thực, gửi và gửi yêu cầu đăng lên Express API. Nhưng trước đó, tôi không nghĩ rằng tôi có một sự hiểu biết thấu đáo về cách thực hiện điều này. Tôi đã xem câu hỏi this và these và nhiều người khác nhưng tôi không chắc đây là cách tiếp cận tốt nhất.

Đây là cách tôi cho rằng nó sẽ được thực hiện:

tôi tạo ra một Phản ứng linh kiện cho các trang đăng ký. (Giản thể cho cuộc biểu tình)

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> 
     ) 
    } 
} 

Khi nút được nhấp các onsubmit() chức năng gây nên, nơi nó sẽ được thông qua dữ liệu JSON.

{ 
    "name": "Kanye", 
    "surname": "West", 
    "email":"yeezy@goodmusic.com", 
    "password":"notsurehowthiswillwork" 
} 

đâu tôi có thể kích hoạt hành động của tôi SignupAction() mà sẽ thực hiện cuộc gọi AJAX API của tôi và sau đó cập nhật gia giảm của tôi.

Sự nhầm lẫn nhân lên khi sử dụng thư viện như react-redux-form hoặc redux-form. Tôi chỉ muốn đơn giản là có một mô hình hoặc một cái gì đó cho name, surnameemail và password, nhưng tôi cảm thấy rằng các thư viện hơn chế ngay sau khi họ bắt đầu có giảm tốc riêng của họ như:

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

MY tùy chọn khác là:

class SignupForm extends Component { 

    constructor(props){ 
     super(props); 
     this.state.form = { 
      name : '', 
      surname: '', 
      email: '', 
      password: '' 
     } 
    } 
    onSubmit(e){ 
     e.preventDefault(); 
     this.props.SignupAction(this.state.form); 
     // then reset the state agian to '' 
    } 
} 

Nhưng, câu hỏi của tôi là ... sẽ t hiệu quả hiệu quả của mình và nếu như vậy TẠI SAO?

Answer 1

Tôi khuyên bạn nên sử dụng redux-form. Nó cung cấp cho bạn tùy chọn sau:

1. xác nhận Input
2. Các loại đầu vào bao gồm ngày và tập tin cập nhật
3. Cung cấp một phương pháp onSubmit được gọi sau khi xác nhận của bạn thành công (đây là điểm mà bạn cử hành động để gọi trạng thái cập nhật và API của bạn)

Nhưng nếu vẫn không muốn sử dụng (tôi khuyên bạn nên sử dụng nó), bạn có thể thực hiện việc gửi biểu mẫu vừa xác thực dữ liệu và gửi hành động trong vùng chứa của bạn. Vì vậy, chuyển dữ liệu của bạn dưới dạng tham số từ thành phần của bạn tới vùng chứa nơi bạn gửi một lệnh gọi/post API (ở dạng redux bạn không cần truyền bất cứ thứ gì, bạn có thể đọc trực tiếp từ cửa hàng).

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> 
     ) 
    } 
} 

container:

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

Answer 2

cách Rất dễ dàng để đối phó với các hình thức:

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;