表格领域的数据突然转移到另一个领域

Question

当我填写一个字段时，字母将被转移到另一个字段，可以在另一个组件的文本块中传输。在此之前一切正常，只是一时出现问题，不明白。请帮忙。gif with problem here

我的组件：

＆＃13;

＆＃13;

import React from 'react'
import axios from 'axios'
import {Row, Col, FormGroup, ControlLabel, FormControl, HelpBlock} from 'react-bootstrap'
import SelectizeSimple from '../../SelectizeSimple'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'

import {
  setUserSecureId,
  setUserName,
  setCompany,
  setAddressFirstLine,
  setAddressSecondLine,
  setCity,
  setState,
  setZip,
  setVat,
  setEmail
} from 'store/user'



class PersonalInfo extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      inputName:''
    }
  }

  submitFormPersonalInfo = (event) => {
    axios.post('', {
      query: 'mutation UpdateUser($form:UpdateUserInput!) { update_user (input:$form) { id } }',
      variables: {form: this.props.updateUser},
    }).then(res => {
      console.log(res)
    })
  }

  changeUserName = (event) => {
    this.props.actions.setUserName(event.target.value)
  }

  changeCompany = (event) => {
    this.props.actions.setCompany(event.target.value)
  }

  changeAddressFirstLine = (event) => {
    this.props.actions.setAddressFirstLine(event.target.value)
  }

  changeAddressSecondLine = (event) => {
    this.props.actions.setAddressSecondLine(event.target.value)
  }

  changeCity = (event) => {
    this.props.actions.setCity(event.target.value)
  }

  changeState = (event) => {
    this.props.actions.setState(event.target.value)
  }

  changeZIP = (event) => {
    this.props.actions.setZip(event.target.value)
  }

  changeVat = (event) => {
    this.props.actions.setVat(event.target.value)
  }

  changeEmail = (event) => {
    this.props.actions.setEmail(event.target.value)
  }


  render(){
    return(
      <div>
        <div className="tab-wrap-inner-header">
          <div className="title_primary title_primary__inner">Personal Info</div>
        </div>
        <div className="form-wrap form-wrap__large-right-gap">
          <form action="" className="form-default">
            <FormGroup className="form-group__indent-bot-big">
              <ControlLabel>
                E-mail
              </ControlLabel>
              <div className="form-edit-box">
                <FormControl placeholder="email@gmail.com"
                             onChange={this.changeEmail}
                              value={this.props.updateUser.email}/>
                <button className="btn-edit btn-edit__left-gap">
                  Edit
                </button>
              </div>
              <HelpBlock>This address will appear on your License.</HelpBlock>
            </FormGroup>
            <FormGroup className="form-group__indent-bot-big">
              <ControlLabel>
                Password
              </ControlLabel>
              <div className="form-edit-box">
                <FormControl type="password" placeholder="*********"></FormControl>
                <button className="btn-edit btn-edit__left-gap">
                  Edit
                </button>
              </div>
            </FormGroup>
            <FormGroup className="form-group__indent-bot-big">
              <ControlLabel>
                Name
              </ControlLabel>
              <FormControl
                onChange={this.changeUserName}
                value={this.props.updateUser.name}/>
            </FormGroup>
            <FormGroup className="form-group__indent-bot-big">
              <ControlLabel>
                Company Name (optional)
              </ControlLabel>
              <FormControl
                onChange={this.changeCompany}
                value={this.props.updateUser.company}
              />
              <HelpBlock className="flexbox align-center">
                <div className="radio-box radio-box__square radio-box__nogap">
                  <FormControl type="checkbox" id="radioGroup11"></FormControl>
                  <ControlLabel htmlFor="radioGroup11" className="radio-box__pseudo-radio"></ControlLabel>
                </div>
                <label htmlFor="radioGroup11" className="label-default">Hide information about my country from my profile</label>
              </HelpBlock>
            </FormGroup>
            <FormGroup className="form-group__indent-bot-big">
              <ControlLabel>
                Adress Line 1
              </ControlLabel>
              <FormControl
                onChange={this.changeAddressFirstLine}
                value={this.props.updateUser.address_first_line}
              />
            </FormGroup>
            <FormGroup className="form-group__indent-bot-big">
              <ControlLabel>
                Adress Line 2 (optional)
              </ControlLabel>
              <FormControl
                onChange={this.changeAddressSecondLine}
                value={this.props.updateUser.address_second_line}
              />
            </FormGroup>
            <FormGroup className="form-group__indent-bot-big">
              <ControlLabel>
                City
              </ControlLabel>
              <FormControl
                onChange={this.changeCity}
                value={this.props.updateUser.city}
              />
            </FormGroup>
            <FormGroup className="form-group__indent-bot-big">
              <ControlLabel>
                State / Province / Region
              </ControlLabel>
              <FormControl
                onChange={this.changeState}
                value={this.props.updateUser.state}
              />
            </FormGroup>
            <FormGroup className="form-group__indent-bot-big">
              <ControlLabel>
                ZIP / Postal Code
              </ControlLabel>
              <FormControl
                onChange={this.changeZIP}
                value={this.props.updateUser.zip}
              />
            </FormGroup>
            <FormGroup className="form-group__indent-bot-big">
              <ControlLabel>
                VAT number (if applicable)
              </ControlLabel>
              <FormControl
                onChange={this.changeVat}
                value={this.props.updateUser.vat}
              />
            </FormGroup>
            <button type="button" className="btn btn-primary btn-primary__submit" onClick={this.submitFormPersonalInfo}>
              Save Changes
            </button>
          </form>
        </div>
      </div>
    )
  }
}


const mapStateToProps = (state) => {
  return ({
    updateUser: state.user.updateUser,
  })
}

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators({
    setUserSecureId,
    setUserName,
    setCompany,
    setAddressFirstLine,
    setAddressSecondLine,
    setCity,
    setState,
    setZip,
    setVat,
    setEmail
  }, dispatch),
})

export default connect(mapStateToProps, mapDispatchToProps)(PersonalInfo)

＆＃13;

＆＃13;

＆＃13;

我的减速机：

＆＃13;

＆＃13;

import axios from 'axios'
export const GET_USER_INFO = 'GET_USER_INFO'
export const GET_CURRENT_USER = 'GET_CURRENT_USER'
export const SET_USER_AVATAR = 'SET_USER_AVATAR'
export const SET_USER_BANNER = 'SET_USER_BANNER'
export const SET_USER_SECURE_ID = 'SET_USER_SECURE_ID'
export const SET_USER_NAME = 'SET_USER_NAME'
export const SET_COMPANY = 'SET_COMPANY'
export const SET_ADDRESS_FIRST_LINE = 'SET_COMPANY'
export const SET_ADDRESS_SECOND_LINE = 'SET_COMPANY'
export const SET_CITY = 'SET_CITY'
export const SET_STATE = 'SET_STATE'
export const SET_ZIP = 'SET_ZIP'
export const SET_VAT = 'SET_VAT'
export const SET_BIOGRAPHY = 'SET_VAT'
export const ADD_TRACK_TO_FAVORITES = 'ADD_TRACK_TO_FAVORITES'
export const SET_SOCIAL_LINKS = 'SET_SOCIAL_LINKS'
export const SET_EMAIL = 'SET_EMAIL'

const initialState = {
  userInfo: {},
  currentUser: {},
  updateUser: {
    id: '',
    name: "",
    avatar: "",
    address_first_line: "",
    address_second_line: "",
    city: "",
    state: "",
    zip: "",
    vat: "",
    company: "",
    biography: "",
    secure_id: "",
  },
  favorite_tracks:[],
  social_links:[]
}


export const getUserInfo = (user) =>
  (dispatch, getState) => {
    var state = getState();
    return axios.post(API_URL, {
      query: "query User($id:ID) {user(id:$id) { id name email avatar social_links { type url } banner email biography address_first_line address_second_line city state zip vat company secure_id created_at is_current tracks { id name logo created_at composer publisher } favorite_tracks { id name logo created_at is_favorite user { id name } } followers { id name tracks_count } followings { id name tracks_count }}}",
      variables: {id: user}
    }).then(res => {
      dispatch({
        type: GET_USER_INFO,
        data: res.data.data.user
      })
    })
  }

export const getCurrentUser = () =>
  (dispatch, getState) => {
    var state = getState();
    return axios.post(API_URL, {
      query: "{ current_user () { id name email biography created_at is_current } }"
    }).then(res => {
      dispatch({
        type: GET_CURRENT_USER,
        data: res.data.data.current_user
      })
    })
  }

export const AddTrackToFavorites = (id) =>
  (dispatch, getState) => {
    var state = getState();
    return axios.post(API_URL, {
      query: "mutation AddTrackToFavorites($input:AddTrackToFavoritesInput!) { add_track_to_favorites (input:$input) { id } }",
      variables: { input: { id: id } }
    }).then(res => {

    })
  }

export const RemoveTrackFromFavorites = (id) =>
  (dispatch, getState) => {
    var state = getState();
    return axios.post(API_URL, {
      query: "mutation RemoveTrackFromFavorites($input:RemoveTrackFromFavoritesInput!) {remove_track_from_favorites (input:$input) { id }}",
      variables: { input: { id: id } }
    }).then(res => {

    })
  }

export const setUserAvatar = (avatar) =>
  (dispatch) => {
    dispatch({
      type: SET_USER_AVATAR,
      data: avatar
    })
  }

export const setUserBanner = (banner) =>
  (dispatch) => {
    dispatch({
      type: SET_USER_BANNER,
      data: banner
    })
  }

export const setUserName = (name) =>
  (dispatch) => {
    dispatch({
      type: SET_USER_NAME,
      data: name
    })
  }

export const setCompany = (company) =>
  (dispatch) => {
    dispatch({
      type: SET_COMPANY,
      data: company
    })
  }

export const setAddressFirstLine = (address) =>
  (dispatch) => {
    dispatch({
      type: SET_ADDRESS_FIRST_LINE,
      data: address
    })
  }

export const setAddressSecondLine = (address) =>
  (dispatch) => {
    dispatch({
      type: SET_ADDRESS_SECOND_LINE,
      data: address
    })
  }

export const setCity = (city) =>
  (dispatch) => {
    dispatch({
      type: SET_CITY,
      data: city
    })
  }

export const setState = (state) =>
  (dispatch) => {
    dispatch({
      type: SET_STATE,
      data: state
    })
  }

export const setEmail = (state) =>
  (dispatch) => {
    dispatch({
      type: SET_EMAIL,
      data: state
    })
  }

export const setZip = (zip) =>
  (dispatch) => {
    dispatch({
      type: SET_ZIP,
      data: zip
    })
  }

export const setVat = (vat) =>
  (dispatch) => {
    dispatch({
      type: SET_VAT,
      data: vat
    })
  }

export const setBiography = (biography) =>
  (dispatch) => {
    dispatch({
      type: SET_BIOGRAPHY,
      data: biography
    })
  }

export const setSocialLinks = (links) =>
  (dispatch) => {
    dispatch({
      type: SET_SOCIAL_LINKS,
      data: links
    })
  }

export const setUserSecureId = (value) =>
  (dispatch) => {
    dispatch({
      type: SET_USER_SECURE_ID,
      data: value,
    })
  }


const ACTION_HANDLERS = {
  [GET_USER_INFO]: (state, action) => {
    return ({
      ...state,
      userInfo: {
        ...state.userInfo,
        created_at: action.data.created_at,
        is_current: action.data.is_current,
        tracks: action.data.tracks,
        followers: action.data.followers,
        followings: action.data.followings,
        favorite_tracks: action.data.favorite_tracks,
      },
      updateUser: {
        ...state.updateUser,
        id: action.data.id,
        email: action.data.email,
        secure_id: action.data.secure_id,
        name: action.data.name,
        avatar: action.data.avatar,
        banner: action.data.banner,
        company: action.data.company,
        address_first_line: action.data.address_first_line,
        address_second_line: action.data.address_second_line,
        city: action.data.city,
        state: action.data.state,
        zip: action.data.zip,
        vat: action.data.vat,
        biography: action.data.biography,
        social_links: action.data.social_links
      },
      favorite_tracks: action.data.favorite_tracks,
      social_links: action.data.social_links
    })
  },
  [GET_CURRENT_USER]: (state, action) => {
    return ({
      ...state,
      currentUser: action.data
    })
  },
  [SET_USER_AVATAR]: (state, action) => {
    return ({
      ...state,
      updateUser: {
        ...state.updateUser,
        avatar: action.data
      }
    })
  },
  [SET_USER_BANNER]: (state, action) => {
    return ({
      ...state,
      updateUser: {
        ...state.updateUser,
        banner: action.data
      }
    })
  },
  [SET_USER_NAME]: (state, action) => {
    return ({
      ...state,
      updateUser: {
        ...state.updateUser,
        name: action.data
      }
    })
  },
  [SET_COMPANY]: (state, action) => {
    return ({
      ...state,
      updateUser: {
        ...state.updateUser,
        company: action.data
      }
    })
  },
  [SET_ADDRESS_FIRST_LINE]: (state, action) => {
    return ({
      ...state,
      updateUser: {
        ...state.updateUser,
        address_first_line: action.data
      }
    })
  },
  [SET_ADDRESS_SECOND_LINE]: (state, action) => {
    return ({
      ...state,
      updateUser: {
        ...state.updateUser,
        address_second_line: action.data
      }
    })
  },
  [SET_CITY]: (state, action) => {
    return ({
      ...state,
      updateUser: {
        ...state.updateUser,
        city: action.data
      }
    })
  },
  [SET_STATE]: (state, action) => {
    return ({
      ...state,
      updateUser: {
        ...state.updateUser,
        state: action.data
      }
    })
  },
  [SET_ZIP]: (state, action) => {
    return ({
      ...state,
      updateUser: {
        ...state.updateUser,
        zip: action.data
      }
    })
  },
  [SET_VAT]: (state, action) => {
    return ({
      ...state,
      updateUser: {
        ...state.updateUser,
        vat: action.data
      }
    })
  },
  [SET_BIOGRAPHY]: (state, action) => {
    return ({
      ...state,
      updateUser: {
        ...state.updateUser,
        biography: action.data
      }
    })
  },
  [SET_USER_SECURE_ID]: (state, action) => {

    return ({
      ...state,
      updateUser: {
        ...state.updateUser,
        secure_id: action.data
      }
    })
  },
  [SET_EMAIL]: (state, action) => {

    return ({
      ...state,
      updateUser: {
        ...state.updateUser,
        email: action.data
      }
    })
  },
  [ADD_TRACK_TO_FAVORITES]: (state, action) => {
    return ({
      ...state,
      favorite_tracks: action.data
    })
  },
  [SET_SOCIAL_LINKS]: (state, action) => {
    return ({
      ...state,
      social_links: action.data
    })
  },
}


export default function userReducer(state = initialState, action) {
  const handler = ACTION_HANDLERS[action.type]
  return handler ? handler(state, action) : state
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的问题是因为多个redux操作ID的相同常量：

function onCardStopDragged(e, ui) {
                if ($scope.searchText && $scope.searchText.length > 0) {
                    ui.item.data('position', '-999');
                    ui.item.sortable.cancel();

                    $('#clearFilterConfirmationDialog').modal('show').focus();
                }
            }

需要替换为：

export const SET_COMPANY = 'SET_COMPANY'
export const SET_ADDRESS_FIRST_LINE = 'SET_COMPANY'
export const SET_ADDRESS_SECOND_LINE = 'SET_COMPANY'