我知道以前有人问过这个问题，但我已经尝试了所有我能找到的解决方案，在浪费了几天之后，我真的要哭了。我究竟做错了什么？
尽管我越来越不顾一切地试图诱使输入字段表现得像最基本的文本输入字段，但输入字段仍然存在readonly并且onChange不会触发。
这是我的代码：
import React, { Component, PropTypes } from 'react';
export default class Contact extends Component {
constructor(props) {
super(props);
this.state = { name: '' };
}
handleChange(e) {
this.setState ({ name: e.target.value });
}
render() {
return (
<div>
<form>
<input
type = "text"
value = { this.state.name }
onChange = { this.handleChange.bind(this) }
/>
</form>
</div>
);
}
}
编辑：我刚刚意识到，只要我添加<Contact />到不调用componentDidMount(). 如果有人能够详细说明为什么会使输入字段变为只读，即调用是否componentDidMount()以某种方式干扰onChange或setState？
编辑 …
我想在App.jsx中使用connect()javascript函数.我正在使用流星框架.
App.jsx
import React from 'react';
/* [I THINK THAT SOME IMPORT CODES SHOULD BE HERE..] */
export default class App extends React.Component {
render() {
return (
<div>
<button
onClick={ /* [I WANT TO USE connect() FUNCTION HERE] */ }
> Connect </button>
</div>
);
}
}
connect.js
function connect() {
console.log('connected');
}
谢谢.
目前我正在开发一个基于Meteor的项目作为后端,React作为前端.我真的很喜欢简单,直到我删除insecure包并且必须处理Meteor方法.现在我需要执行一个基本的插入操作,我只是被卡住了!我有一个表单作为组件(如果最终我想使用此表单不仅用于插入项目,而且还用于编辑这些项目)这里是我的代码:
AddItemForm = React.createClass({
propTypes: {
submitAction: React.PropTypes.func.isRequired
},
getDefaultProps() {
return {
submitButtonLabel: "Add Item"
};
},
render() {
return (
<div className="row">
<form onSubmit={this.submitAction} className="col s12">
<div className="row">
<div className="input-field col s6">
<input
id="name"
placeholder="What"
type="text"
/>
</div>
<div className="input-field col s6">
<input
placeholder="Amount"
id="amount"
type="text"
/>
</div>
</div>
<div className="row">
<div className="input-field col s12">
<textarea
placeholder="Description"
id="description"
className="materialize-textarea">
</textarea>
</div>
</div>
<div className="row center">
<button className="btn waves-effect waves-light" type="submit">{this.props.submitButtonLabel}</button>
</div>
</form>
</div>
);
}
}); …VSCode抱怨html文件上缺少DOCTYPE。流星构建系统会自动添加文件类型，使用它们会导致构建错误。如何使vscode忽略html文件上缺少的doctype？
错误我得到这个。
Doctype must be declared first.
我正在做Meteor React simple-todos教程.第一步是创建应用程序,cd进入app目录并运行meteor.到现在为止还挺好.
我按照步骤2中的说明进行了更改,但未显示待办事项列表.我得到一个空白的屏幕.
代码与https://www.meteor.com/tutorials/react/components上的给出完全相同 没有错误消息显示在浏览器或控制台中.
版本:Meteor 1.5.2.1,OS = Ubuntu 16.04 LTS
我想在基于流星的反应项目中获取当前路线路径，我想在外部创建登录页面..我该怎么做？这是我的源代码
客户端/main.jsx
import React from "react";
import {meteor} from "meteor/meteor";
import {render} from "react-dom";
import {
BrowserRouter as Router,
Route
} from "react-router-dom"
import "./main.css";
import "../imports/ui/stylesheets/main.scss";
import Main from "../imports/ui/Main";
Meteor.startup(() => {
return render((
<Router>
<Main/>
</Router>
), document.getElementById("app-root"));
});
用户界面/main.jsx
import React, {Component} from "react";
import Link, {withRouter} from "react-router-dom"
import PropTypes from "prop-types";
/*@import Templates*/
import Sidebar from "./components/sidebar";
class Main extends Component {
render() {
return (
<div className="container-fluid">
<Sidebar/>
//want current location path for …我目前正在研究我的第一个React项目,我遇到了在组件之间传递数据的问题.我正在使用此库日历小部件,以根据列表中的选定项目设置不同的日期.
https://github.com/vazco/meteor-universe-react-widgets
在这个结构中,我有四个在我的树中的交互组件:
-----A-----
| |
C B
|
|
D
我目前正在从顶级组件(组件A)的列表(组件B)中存储所选项目的数据.我想要传递数据的组件是组件D.我想要做的是创建一个状态并将值传递给C然后传递给D.不幸的是,C是库中的日历组件,我无法真正操作.
因为我需要D中访问B中的选择所生成的对象而不能操作C,有没有办法在子组件的头部传递值？
代码片段:
如何在A中调用组件C(日历),同时也传入组件D(dayComponent).
<Calendar dayComponent={DayComponent}/>;
日历组件声明和导入
System.import('{universe:react-widgets}').then(ReactWidgets => {
Calendar = ReactWidgets.Calendar;
});
Day组件返回日历日的样式.
DayComponent = React.createClass({
render() {
var date = this.props.date
, style = { backgroundColor: date < new Date() && '#F57B7B' }
return (<div style={style}>
{this.props.label}
</div>);
}
})
我希望alert()每次在 React 中跟踪的 Meteor 订阅withTracker更改时都显示一个模式对话框（例如）。
我试过使用 Tracker.autorun来跟踪更改，但无法确定在代码中放置它的位置。它似乎在Component构造函数中不起作用，如果放在render().
这是我的代码的概述：
class Foo extends Component {
render() {
return (
<h1>Example Header</h1>
{ this.maybeShowAlert() }
);
}
maybeShowAlert() {
// ONLY if bar has been updated
alert('bar has changed');
}
}
export default withTracker(() => {
Meteor.subscribe('bar')
return {
bar: Bar.findOne({})
};
})(Foo);