Question

我正在学习Redux并尝试在我的React应用中使用Redux添加/查看用户。在React中使用'ref'，我正在读取新用户的有效负载（名称，帐户编号），并将其传递给'addProfile'操作创建者以这种方式onClick“添加”按钮-

AddView.js

import React from 'react';
import { connect } from 'react-redux';

import { addProfile } from '../actions';

class AddView extends React.Component{

    addValues(){
        return(
            <div>
                Name : <input type="text" value={this.props.profiles.name} ref={el => this.nameValue=el}/> 
                Account Number : <input type="text" value={this.props.profiles.account_number} ref={el => this.accountValue=el}/>
                <button onClick={() => this.props.addProfile(this.nameValue,this.accountValue)}>Add</button>

            </div>
        );
    }
    render(){

        return (
            <div>
                Add Profile
                <br /><br />
                {this.addValues()}

            </div>
        );
    }

}
const mapStateToProps = (state) => {
    return { profiles : state.profiles }
}
export default connect(mapStateToProps, {addProfile}) (AddView);

现在我正在尝试在操作创建者中记录名称，帐户号，但是我得到的是html而不是值。

export const addProfile = (name, account_number) => {
    console.log(name,account_number)
    return{
        type :'ADD_PROFILE',
        payload : {
            name : name,
            account_number : account_number
        }
    };
}

任何人都可以帮助我哪里出错了。完整代码在这里-https://codesandbox.io/s/239j97y36p

Answer 1

React refs为您提供对dom元素的引用，如果您只想要输入的值，则可以使用.value来获取。我还要重命名您的ref变量，然后使其准确如nameInputRef和accountInputRef。

    Name :{" "}
    <input
      type="text"
      value={this.props.profiles.name}
      ref={el => (this.nameInputRef = el)}
    />
    Account Number :{" "}
    <input
      type="text"
      value={this.props.profiles.account_number}
      ref={el => (this.accountInputRef = el)}
    />
    <button
      onClick={() =>
        this.props.addProfile(this.nameInputRef.value, this.accountNumberRef.value)
      }
    > Add
    </button>

您可以在此处查看改编自的完整示例：https://codesandbox.io/s/k3mp28lr3o

Answer 2

class UserProfile extends Component {
    constructor(props) {}
    render() {

        // ref={el => this.nameValue=el} to access input variable 
        // or 
        // use onChange event which fire another dispatcher which mutate profile state since we assign input values to profile state you can use state to get latest values


        //this.props.profiles
        //this.props.onAddProfile()
    }
}

const mapStateToProps = state => {
  return {
    profiles : state.profiles
  }
}

const mapDispatchToProps = dispatch => {
  return {
      onAddProfile:dispatch(addProfile())
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(UserProfile);

Answer 3

您是在onclick事件期间将元素分配给变量的。

ref={el => this.nameValue=el}

您可以使用本地状态来存储while onChange的值，而不是ref

Answer 4

npm install redux-thunk --save

profile.jsx

class Profile extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <input
                    type="text"
                    onChange={({ target }) =>
                        this.props.onUsernameUpdated(target.value)
                    }
                    value={this.props.profile.username}
                    placeholder="Username"
                />

                <input
                    type="text"
                    onChange={({ target }) =>
                        this.props.onAccNumberUpdated(target.value)
                    }
                    value={this.props.profile.accNumber}
                    placeholder="Account Number"
                />

                <button onclick={this.props.onUpdateProfile}>Submit</button>
            </div>
        )
    }
}

const mapStateToProps = state => {
    return {
        profile: state.profile
    };
};

const mapDispatchToProps = dispatch => {
    return {
        onUsernameUpdated: username => dispatch(usernameUpdated(username)),
        onAccNumberUpdated: password => dispatch(accNumberUpdated(accNumber)),
        onUpdateProfile: () => dispatch(updateProfile())
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Profile);

actions.js

export function usernameUpdated(username) { // need reducer to update state profile name
    return {
        type: 'USER_NAME_UPDATE',
        data: username
    }
}

export function accNumberUpdated(accNumber) { // need reducer to update state profile acc number
    return {
        type: 'ACC_NUM_UPDATE',
        data: accNumber
    }
}

export function updateProfile() {
    return (dispatch, getState) => { //thunk magic
        // latest profile after user input
        const profile = getState().profile
    }
}

如何在react-redux应用程序中读取更新的状态？

4 个答案: