小编meg*_*ams的帖子

使用react-dropzone(https://www.npmjs.com/package/react-dropzone)并将文件记录到控制台,但无法获取图像预览以填充状态更改.知道我做错了什么吗？

export default class JoinForm extends Component {
    constructor(props) {
    super(props)
        this.state = {
            imageFiles: []
    }
}

onDrop(imageFiles) {
    this.setState({
        imageFiles: imageFiles
    })
    console.log(imageFiles)  
}

render() {

    return(
        <form className='join-form' ref='joinForm' autoComplete='off'>
            <Dropzone
                onDrop={this.onDrop}
                className='dropzone'
                activeClassName='active-dropzone'
                multiple={false}>
      <div>Drag and drop or click to select a 550x550px file to upload.</div>
    </Dropzone>

            {this.state.imageFiles.length > 0 ? <div>
    <h2>Uploading {this.state.imageFiles.length} files...</h2>
    <div>{this.state.imageFiles.map((file) => <img src={file.preview} /> )}</div>
    </div> : null}
        </form>
    )
}

};

一般问题,但将包括一个具体的例子:在哪里是循环通过状态/存储数据以提取计算的正确位置？

所以在这里,我需要进行一些计算,以显示在"统计数据"侧边栏中,该边栏需要循环遍历每个客户端阵列(可能是相当多的客户端)以提取不同的道具/值并将它们全部添加在一起.我在渲染中完成它只是为了使它工作,我知道是不正确的,但它是否仍然发生在组件和渲染之外或在reducer中？

值得注意的是,这些将是更新的值(客户端可以标记为"服务",然后统计信息侧栏将增加服务客户端的数量并减少要服务的客户端的数量).但这有点超出了我的一般问题的范围.

Hows和为什么非常感谢,感谢百万!

    import React, { Component, PropTypes } from 'react';
    import { browserHistory } from 'react-router';
    import './ScheduleDayContainer.scss';
    import { connect } from 'react-redux';
    import { bindActionCreators } from 'redux';
    import * as ScheduleActions from '../../actions/ScheduleActions';

    class ScheduleDayContainer extends Component {
      static propTypes = {
        actions: PropTypes.object,
        clients: PropTypes.array.isRequired
      };

      constructor(props, context) {
        super(props, context);
      }

      componentWillMount() {
        // gets schedule (code removed because doesn't matter here) and clients array (used below)
        this.props.actions.fetchDaySchedule();
      }

      render() { …

我使用Redux形式的FieldArray允许用户在不同的日期为其商店创建开放时间段。

添加它们的方法很好，但是一旦创建，就需要在其“编辑存储打开时间”部分中将一个表单与初始创建的数据一起加载，以便以后进行更改。

无法弄清楚如何遍历返回的信息。以下内容可以创建，但是我需要解决方案才能将服务块引入并打印到字段集中，以便用户可以编辑和重新提交。

    renderGroups = ({ fields, meta: { touched, error } }) => {
      return (
        <div>
          {fields.map((service, index) =>
            <div className="service-type-group" key={index}>
              <h4>{this.stringifyServiceNumbers(index + 1)} Service</h4>
              <button
                type="button"
                className="remove-button"
                onClick={() => fields.remove(index)}>Remove
              </button>
              <div className="field-group third">
                <Field
                  name={`${service}.day`}
                  component={SelectField}
                  floatingLabelText="Day of week"
                  className="textfield">
                    <MenuItem value={1} primaryText="Monday" />
                    <MenuItem value={2} primaryText="Tuesday" />
                    <MenuItem value={3} primaryText="Wednesday" />
                    <MenuItem value={4} primaryText="Thursday" />
                    <MenuItem value={5} primaryText="Friday" />
                    <MenuItem value={6} primaryText="Saturday" />
                    <MenuItem value={0} primaryText="Sunday" />
                </Field>
                <Field
                  name={`${service}.fromTime`}
                  component={TimePicker}
                  defaultValue={null}
                  floatingLabelText="From"
                  className="textfield" …

这个排序的作品,除了附加块显示不出来,当我做出的service_type无线电选择它,只弹出/重新呈现,如果我完成额外的操作,比如添加或删除服地块或更改其他领域.

    import './Register.scss';
    import React, { Component, PropTypes } from 'react';
    import { connect } from 'react-redux';
    import { Field, reduxForm, FieldArray, formValueSelector } from 'redux-form';
    import MenuItem from 'material-ui/MenuItem';
    import { RadioButton } from 'material-ui/RadioButton'
    import {
      TextField,
      SelectField,
      TimePicker,
      RadioButtonGroup
    } from 'redux-form-material-ui';
    import validate from './validate';

    class OnboardPageThree extends Component {
      static propTypes = {
        handleSubmit: PropTypes.func.isRequired,
        previousPage: PropTypes.func.isRequired
      }

      constructor(props, context) {
            super(props, context);
        }

      renderGroups = ({ fields, meta: { touched, error } …