發送它從表單到動作文件的內容React/Redux

Question

我想將組件的狀態發送到動作文件。 我的組件是<form>，用戶可以捕獲一些配置，稍後我想將該配置應用到操作文件。

組件代碼：

import React, { Component } from 'react'; 

class AdminConfig extends Component{ 
    constructor(props){ 
    super(props); 
    this.state=({ 
     baseURL:'BASE_URL', 
     hospitalName: '', 
     hospitalExternalID:'1000849', 
     payerName:'', 
     payerAddress:'' 
    }) 
    this.onBaseURLChange = this.onBaseURLChange.bind(this); 
    this.onHospitalNameChange = this.onHospitalNameChange.bind(this); 
    this.onHospitalExIDChange = this.onHospitalExIDChange.bind(this); 
    this.onPayerNameChange = this.onPayerNameChange.bind(this); 
    this.onPayerAddressChange = this.onPayerAddressChange.bind(this); 
    this.onAdminFormSubmit = this.onAdminFormSubmit.bind(this); 
    } 
    onBaseURLChange(e){ 
    this.setState({ 
     baseURL: e.target.value 
    }) 
    } 
    onHospitalNameChange(e){ 
    this.setState({ 
     hospitalName: e.target.value 
    }) 
    } 
    onHospitalExIDChange(e){ 

    } 
    onPayerNameChange(e){ 
    this.setState({ 
     payerName: e.target.value 
    }) 
    } 
    onPayerAddressChange(e){ 
    this.setState({ 
     payerAddress: e.target.value 
    }) 
    } 
    onAdminFormSubmit(e){ 
    e.preventDefault() 
    // here is where i need to send something like this: 
    this.props.fetchAdminConfig(this.state.baseURL) 
    } 
    render(){ 
    return(
     <div className="container "> 
     <form className="admin-form" onSubmit={this.onAdminFormSubmit}> 
      <div className="row"> 
      <div className="jumbotron col-md-12"> 
       <h4>API CONFIGURATION</h4> 
      </div> 
      <div className="col-md-12"> 
       <div className="panel panel-primary"> 
       <div className="panel-heading">BASE URL</div> 
       <div className="panel-body"> 
        <input 
        onChange={this.onBaseURLChange} 
        type="text" 
        className="form-control" 
        id="baseURL" 
        placeholder="Base URL" /> 
        <div className="panel-body" id="getResult"> <p className="">Base URL: http://{this.state.baseURL}/trucare-api-6.2.1.TC621/6.2.1/api</p></div> 
       </div> 
       </div> 
      </div> 
      </div> 
      <div className="row"> 
      <div className="jumbotron col-md-12"> 
       <h4>HOSPITAL INFORMATION</h4> 
      </div> 
      <div className="col-md-6"> 
       <div className="panel panel-primary"> 
       <div className="panel-heading">Hospital Name</div> 
       <div className="panel-body"> 
        <input 
        onChange={this.onHospitalNameChange} 
        type="text" 
        className="form-control" 
        id="hospitalName" 
        placeholder="Hospital Name" /> 
        <div className="panel-body" id="getResult"><p className="">Hospital name: {this.state.hospitalName}</p></div> 
       </div> 
       </div> 
      </div> 
      <div className="col-md-6"> 
       <div className="panel panel-primary"> 
       <div className="panel-heading">Hospital External ID</div> 
       <div className="panel-body"> 
        <input 
        onChange={this.onHospitalExIDChange} 
        type="text" 
        className="form-control" 
        id="hospitalEXID" 
        placeholder="Hospital Name" disabled /> 
        <div className="panel-body" id="getResult"><p>Hospital External ID: {this.state.hospitalExternalID}</p></div> 
       </div> 
       </div> 
      </div> 
      </div> 
      <div className="row"> 
      <div className="jumbotron col-md-12"> 
       <h4>PAYER INFORMATION</h4> 
      </div> 
      <div className="col-md-6"> 
       <div className="panel panel-primary"> 
       <div className="panel-heading">Payer Name</div> 
       <div className="panel-body"> 
        <input 
        onChange={this.onPayerNameChange} 
        type="text" 
        className="form-control" 
        id="payerName" 
        placeholder="Payer Name" /> 
        <div className="panel-body" id="getResult"><p>Payer Name: {this.state.payerName}</p></div> 
       </div> 
       </div> 
      </div> 
      <div className="col-md-6"> 
       <div className="panel panel-primary"> 
       <div className="panel-heading">Payer Address</div> 
       <div className="panel-body"> 
        <input 
        onChange={this.onPayerAddressChange} 
        type="text" 
        className="form-control" 
        id="payerAddress" 
        placeholder="Payer Address" /> 
        <div className="panel-body" id="getResult"><p>Payer Address: {this.state.payerAddress}</p></div> 
       </div> 
       </div> 
      </div> 
      </div> 
      <button type="submit" className="btn btn-primary btn-lg">Apply config</button> 
     </form> 
     </div> 
    ); 
    } 
} 
export default AdminConfig 

然後在我的操作文件我有這樣的：

export function fetchAdminConfig(BASE_URL){ 
... 
} 
const BASE_URL = //this is where I want to apply the state that I captued on my form 
    export function fetchUsers() { 
     const request = axios.post(`${BASE_URL}/endpoint`) 
     return { 
     type: FETCH_USERS, 
     payload: request 
     }; 
    } 

我怎麼能做到這一點？

Answer 1

只需將一個參數添加到您的動作創建器功能並將其傳入即可！

export function fetchAdminConfig(BASE_URL) { 
    const request = axios.post(`${BASE_URL}/endpoint`) 
    return { 
    type: FETCH_USERS, 
    payload: request 
    }; 
}