Meteor React Dynami c Проблемы с загрузкой данных и загрузкой файлов - PullRequest
Новая
       12

Meteor React Dynami c Проблемы с загрузкой данных и загрузкой файлов

0 голосов
/ 04 мая 2020

Я использую функцию Meteor React withTracker для загрузки данных.

** У меня две проблемы с приведенным ниже кодом. **

  1. После создания объекта Activity страница не загружается новыми данными. enter image description here
  2. При создании действия, во время загрузки файла образа, появляется следующее исключение, хотя я могу вставить данные и изображение в БД.

Исключение: 

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

Как решить вышеуказанные проблемы?

Ниже приведен код.

ActivityContainer. js

const ActivityContainer = withTracker(() => {
 const subscribeHandles = [];
  subscribeHandles.push(Meteor.subscribe("activities"));
// onSubmit() method code 
-----
-----
// end of onSubmit() method code. 
return {
    loading: subscribeHandles.some((handle) => !handle.ready()),
    activities: Activities.find({
      editObject : {name, description , date, price },
      official: true,
      createdBy: Meteor.user()._id,
    }),
    onSubmit,
  };
})(ActivityList);

export default ActivityContainer ;

ActivityList. js

class ActivityList extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }


// editObject
 componentDidMount() {
    this.setState({
      name: this.props.editObject.name, 
      // ----- other properties(price, date etc)
    });
  }

  fileUploadButton() {
    let fileInput = null;
    return (
      <input type="file" value={this.state.imgURL} ref={(input) => { fileInput = input; }}
        onChange={() => { this.setState({
            image: fileInput.files[0],
            imgURL: URL.createObjectURL(fileInput.files[0]),
          });
        }} />
    );
  }

render() {
const { activities, onSubmit } = this.props;

return (
<div> 
{/* Form object to crate and Edit  */}

 <Form>
  <Form.Field>
    <label>First Name</label>
    <Form.Input width="16" type="text"    name="title"    placeholder="Enter the club name"
      value={this.state.title}
      onChange={this.onFieldChange}
    />
  </Form.Field> 
-- other fields 
   <Form.Field width="8">
        {this.fileUploadButton()}
        {this.state.imgURL && (
          <img src={this.state.imgURL} width="80" height="80" />
        )}
      </Form.Field>

      <Button
        labelPosition="right"
        type="submit"
        onClick={this.onSubmit}
      >
        Submit
    </Button>
</Form

----
-----
------
{/* Below displays activity Cards  */}
  <Card.Group itemsPerRow={3} stackable>
  {activities.map((act) => (
    <ActivityCard activity={act} />
    ))}
  </Card.Group>
</div>
)

}
...