Question

我使用react-redux创建了一个简单的文本字段组件。

这是一个愚蠢的组件，因此它会收到一个回调函数来发送更改。

因此，在每次更改时，它都会更改其本地状态，而在Blur上，它会调用回调函数。

我认为我为这么简单的任务做了太多的事情，看起来有点矫枉过正，是否有更好/更短的方式来实现它？

 export default class CreativeName extends Component {
    constructor(props) {
        super(props);
        this.state = {
            creativeName: props.creativeName
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            creativeName: nextProps.creativeName
        });
    }

    onBlur() {
        this.props.updateDraft('creativeName', this.state.creativeName);
    }

    onChange(e) {`enter code here`
        this.setState({creativeName: e.target.value});
    }

    render() {
        return (
            <Row>
                <Col lg={12} className="row-margin">
                    <ControlLabel>*Name</ControlLabel>
                    <div className="campaign-name">
                        <FormControl value={this.state.creativeName} type="text" onChange={(e) => this.onChange(e)}
                                     onBlur={(e) => this.onBlur(e)} className="campaign-name-text-field" />
                    </div>
                </Col>
            </Row>
        );
    }
}

Answer 1

我真的建议使用redux-form。 redux-form将输入值存储在全局状态。通过redux-from，您可以拥有非常有用的反应组件输入标签。

例如：

import React, { Component, PropTypes} from 'react';

export default class FormInputTextBox extends Component {
  static PropTypes = {
    field: PropTypes.object.isRequired,
    placeholder: PropTypes.string,
    disabled: PropTypes.bool
  }
  render() {
    const {field, placeholder, disabled} = this.props;
    return (
      <div>
        <input
          type="text"
          {...field}
          placeholder={placeholder}
          disabled={disabled}
        />
      </div>
    );
  }
}

Answer 2

我使用connect包提供的react-redux功能。我会重新编写你的代码，所以它看起来像这样（语法是ES6）：

<强> container.js

import {connect} from 'react-redux'
import {presenter} from './presenter'
import {actions} from '../../loader'

const mapStateToProps = (state, props) =>({
    creativeName: props.creativeName
})

const mapDispatchToProps = (dispatch) =>({
    updateDraft : (creativeName) => dispatch(actions.updateDraft('creativeName', creativeName))
})

const container = connect(mapStateToProps, mapDispatchToProps)(presenter)

export {
    container
}

上面的actions只是一个包含标准redux动作创建者的文件。

<强> presenter.js

function presenter ({creativeName}, updateDraft) {

    const onBlur=e=>updateDraft(e.target.value)

    return (
        <Row>
            <Col lg={12} className="row-margin">
                <ControlLabel>*Name</ControlLabel>
                <div className="campaign-name">
                    <FormControl value={creativeName} type="text" onBlur={e=>onBlur(e)} className="campaign-name-text-field" />
                </div>
            </Col>
        </Row>
    )
}

export {
    presenter
}

实际上我根本不会使用任何本地状态，而是使用selector（参见reselect）将组件本地状态拉出全局状态，有点像这样： / p>

presenter.js - mapStateToProps

import {actions, services} from '../../loader'

const mapStateToProps = (state) =>({
    state: services.CreativeName.selector.getAll(state)
})

它当然是一种不同的做事方式，我更喜欢它，但我不确定它是否更简单。

创建文本输入Redux的最佳方法是什么

2 个答案: