javascript - 下拉后如何将映射值发送到状态属性

Question

我目前正在尝试将映射值设置为状态值，在我的代码中，我使用了 2 个映射函数，其中单击时的选择下拉菜单将触发第二个 props 函数，第一个 props 函数确实将值发送到其各自的状态，但是第二个道具值进入空白状态我不知道为什么如果有人能帮助我解决这个问题会很有帮助谢谢

代码 ：

 import React, { Component } from 'react'
import DatePicker from "react-datepicker";
import {postData,getCode,getData} from "../actions/journal";
import {connect} from "react-redux"
import "react-datepicker/dist/react-datepicker.css";
import "./css/JournalAdd.css"

 class JournalAdd extends Component {
    constructor(props){
        super (props);
        this.state={
            code:'',
      head_of_account:'',
 };
this.onChange=this.onChange.bind(this);
        this.onCreate=this.onCreate.bind(this);
        this.handleDateChange=this.handleDateChange.bind(this);
        this.sendData=this.sendData.bind(this);
    }

    componentDidMount(){
        this.props.getData();
        let journal2={
            code:this.state.code,
        }
        this.props.getCode(journal2)
    }

    sendData=e=>{
        e.preventDefault();
        let journal2={
code:this.state.code,
        }
        this.props.getCode(journal2)
    }

    onChange = event => {
        this.setState({ [event.target.name]:event.target.value});
    };
    onCreate(e){
        e.preventDefault();
        let journal2=
        { 
            code:this.state.code,
            head_of_account:this.state.head_of_account,


    };
    console.log(journal2);
    this.props.postData(journal2);
    this.setState({
        code:'',
        head_of_account:'',
    })
    }
    handleDateChange=date=>{
        this.setState({date:date});
    }
      render() {


          return (
              <div classname="masterfile-add">
                  <form className="masterfileadd-form">
                  <p><label className="masterfileadd-text">

                        Code : 
                         < select value={this.state.code}  onChange={this.onChange} name="code" className="jtextbox2" onClick={this.sendData}> 
                             {this.props.journal.map(journal => {  
                  return <option value={journal.code} name="code" >{journal.code}</option>
                             })} 
                   </select>

                        </label>

                      </p>
                      <p><label className="masterfileadd-text">
                          Account Head :

                             {this.props.journal1.map(journal1 => {  
                  return  <label value={this.state.head_of_account} onChange={this.onChange}className= "jtextbox3">{journal1.head_of_account}</label>
                             })} 
                      </label>               
                      </p>
                      </label></p>
                      <p className="jButton"><input type="submit" value="Submit"onChange={this.onChange} onClick={this.onCreate} className="jButtonAdd" /></p>
                  </form>

              </div>
          )
      }
}
const mapStateToProps=state=>({
    journal:state.journalReducer.journal,
    journal2:state.journalReducer.journal2,
    journal1:state.journalReducer.journal1,
    error:state.journalReducer.error
})
export default connect(
    mapStateToProps,{postData,getData,getCode}
)(JournalAdd)

标签： javascriptreactjs