Question

我是redux的新手，不知道我要去哪里错了。我需要将整个代码更改为道具吗？如果我必须将相应的代码更改为props，那么如何接受我在状态{}中输入的内容？你能帮我吗？

我已经通过“ Pass data between independent component react and redux”链接，但是它只有一个输入，在这里我有多个组成部分。

第一个组件：

import React, { Component } from 'react'
import { Button, Icon, Modal, Form} from 'semantic-ui-react';
import {connect} from 'react-redux';
import './Email.css'
//import Editor from './Edit'
import * as storeActions from "../redux/storeActions";

class Compose extends Component {
  constructor(props){
    super(props);
    this.state = {

    to: "",
    cc: "",
    bcc: "",
    subject: ""
  }
  this.changeHandler = this.changeHandler.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

  handleSubmit = (e) => {
    e.preventDefault();

    //Get the values from state
    const To = this.state.to;
    const Cc =  this.state.cc;
    const Bcc =  this.state.bcc;
    const Subject = this.state.subject;

    const sentItem = {
      To,
      Cc,
      Bcc,
      Subject
    }
    // this.props.dispatch({
    //   type:'SENT_MESSAGE',
    //   sentMessage});
console.log(sentItem)
 }

changeHandler = (e) => {
  this.props.dispatch({
    type: 'SENT_MESSAGE',
    payload: e.target.value
});
}
    render() {
      return (
        <Modal trigger={<Button animated inverted color='blue'>
          <Button.Content visible>Compose</Button.Content>
          <Button.Content hidden>
            <Icon name='plus'/>
          </Button.Content>
        </Button>} closeIcon>

           <Modal.Content>
             <Form onSubmit={this.handleSubmit}>
<Form.Input fluid label='To' type="text" className='txtBox' name="to" value={this.state.to} onChange={this.changeHandler}/>
<Form.Input fluid label='Cc' type="text" className='txtBox' name="cc"value={this.state.cc} onChange={this.changeHandler}/>
<Form.Input fluid label='Bcc' type="text" className='txtBox'name="bcc"value={this.state.bcc} onChange={this.changeHandler}/>
<Form.Input fluid label='Subject' type='text' className='txtBox'name="subject" value={this.state.subject} onChange={this.changeHandler}/>

<Button animated inverted color='blue'><Button.Content visible>Send</Button.Content>
        <Button.Content hidden>
          <Icon name='envelope'/>
        </Button.Content>
      </Button>
      <Button animated inverted color='red'><Button.Content visible>Discard</Button.Content>
        <Button.Content hidden>
       <Icon name='remove circle'/>
      </Button.Content>
      </Button>
      </Form>
      </Modal.Content>
      </Modal>
    );
  }
}

function mapStateToProps(state) {
  return {
    sentItem: state.sentMessage
  }
}
const dispatchToProps = (dispatch) => {
  return {
    sentBox: (sentMessage) => {
      dispatch(storeActions.sentBox(sentMessage))
    },
  }
};
// connect to store
export default connect(
  mapStateToProps,
  dispatchToProps
)(Compose);

在redux文件夹中，reduce文件：

import actions from './actions';

const initialState = {

sentMessage: []

}

const emailReducer = (state = initialState, action) => {
  switch (action.type) {
    case actions.SENT_MESSAGE:
      return {
        ...state,
        sentMessage: state.sentMessage.concat(action.payload)
      };
      default:
        return state;
    }
  }


  export default emailReducer;

在操作文件中：

const actions = {
    SENT_MESSAGE: "SENT_MESSAGE",

}
export default actions;

在storeActions.js中：

import actions from './actions';

export function sentBox(sentMessage) {
    return function(dispatch) {
      dispatch({ type: actions.SENT_MESSAGE, payload: sentMessage });
  };
  }

第二部分：

import React, {Component} from 'react';
import { connect } from "react-redux";
import {Grid, Input} from 'semantic-ui-react'
import * as storeActions from "../redux/storeActions";
class SentItem extends Component {
    render(){
        return(
            <Grid.Row className="row message" >
            <Grid.Column width={1} className="myCheckbox">
            <Input type="checkbox"/>
            </Grid.Column>
            <Grid.Column width={2} >
            <i className="star fa fa-star"></i>
            </Grid.Column>
            <Grid.Column width={12}> sentMessage {this.props.sentMessage.map(msg => JSON.stringify(msg) )} 
            </Grid.Column>       
            </Grid.Row>

        );
    }
}




function mapStateToProps(state) {
    return {
      sentMessage: state.sentMessage
    };
  }

  const dispatchToProps = dispatch => {
    return {

        sentBox: () => {
            dispatch(storeActions.sentBox())
          },
    }}



    // connect to store
export default connect(
    mapStateToProps,
    dispatchToProps
  )(SentItem);

Answer 1

有许多事情需要改进：-

1）如果您已经在使用箭头函数，则无需在构造函数中绑定函数（this.changeHandler = this.changeHandler.bind(this);-此行可以删除）。

2）您应该在this.props.sentBox(sentItem)函数的末尾调用handleSubmit来调度有效载荷为sentItem的操作。

3）changeHandler函数应得到纠正，否则对于不同的输入将不会填充正确的状态。

changeHandler = ({target}) => {
   const name = target.name;
   const value = target.value;
   this.setState({ [name]: value })
}

让我们知道您在进行这些更正后遇到的任何错误。

希望有帮助！

如何将以下代码转换为管理代码

1 个答案: