React + Bootstrap + Redux 值无法正常工作答案

【问题标题】：React + Bootstrap + Redux value not working in formReact + Bootstrap + Redux 值无法正常工作
【发布时间】：2016-09-03 11:56:15
【问题描述】：

我在 React 中使用 Bootstrap 和 Redux 定义了一个表单，代码如下：

import React from 'react';
import { FormGroup, ControlLabel, FormControl, HelpBlock, Button } from 'react-bootstrap';
import { connect } from 'react-redux';

import './actions';

const _c = component => connect(s => s)(component);

const FieldGroup = ({ id, label, help, ...props }) => {
  return (
    <FormGroup controlId={id}>
      <ControlLabel>{label}</ControlLabel>
      <FormControl {...props} />
      {help && <HelpBlock>{help}</HelpBlock>}
    </FormGroup>
  );
};

const LoginForm = _c(React.createClass({
  render() {
    return (
      <form>
        <FieldGroup
          id="loginText"
          type="text"
          label="Text"
          placeholder="Email"
          value={this.props.user.email ? this.props.user.email[0] : ''}
        />
        <FieldGroup
          id="loginPassword"
          label="Password"
          type="password"
        />
        <Button bsStyle="primary" bsSize="large">Login</Button>
      </form>
    );
  }
}));

这可行，并且该值显示在“用户名”字段中，但不可编辑。我尝试将 value={this.props.user.email ? this.props.user.email[0] : ''} 更改为 defaultValue={this.props.user.email ? this.props.user.email[0] : ''} 并使其可编辑，但默认值从未出现。我做错了什么？

【问题讨论】：

标签： reactjs react-redux react-bootstrap

【解决方案1】：

（我会发表评论，但我还没有 50 个代表）

听起来您的初始值可能是undefined。你能console.log(this.props.user.email[0]) 看看那个值吗？

【讨论】：