我使用react-redux创建了一个简单的文本字段组件。
这是一个dumb组件,因此它接收回调函数来分派(dispatch)更改。
因此,每次更改时,它都会更改其本地状态,并且在模糊时,它会调用回调函数。
我认为我为这样一个简单的任务做了太多的事情,看起来有点矫枉过正,有更好/更短的方法来实现它吗?
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>
);
}
}
最佳答案
我真的建议使用 redux-form 。 redux-form
将输入值存储在全局状态中。通过 redux-from
你可以拥有非常有用的 React 组件输入标签。
例如:
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>
);
}
}
关于reactjs - 创建文本输入 Redux 的最佳方式是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38940817/