小编Swe*_*ety的帖子

ReactJS警告:TextField正在更改要控制的文本类型的不受控制的输入

我在下面收到此错误.

警告:TextField正在更改要控制的文本类型的不受控制的输入.输入元素不应从不受控制切换到受控制(或反之亦然).决定在组件的使用寿命期间使用受控或不受控制的输入元素.

我正在使用材料-ui.

这是我的代码:

class RegistrationForm extends React.Component{
constructor(props) {
    super(props)
    this.state = { errorText: '', value:this.props }
  }

  phone(event) {
    var strRegExpMobile=/^\d{10}$/;
    if (event.target.value.match(strRegExpMobile)) {
      this.setState({ errorText: '',
                        phone:event.target.value
                     })
    } else {
      this.setState({ errorText: 'Invalid format' })
    }
  }
  handleSubmit(event){
    alert("submit");
    var data={
        phone:this.state.phone
    }
    console.log(data)
  }
  render() {
    return (
        <div>
          <TextField hintText="Phone"
           floatingLabelText="Phone"
           name="phone"
           value={this.state.phone}
           errorText= {this.state.errorText}
           onChange={this.phone.bind(this)}/>

          <RaisedButton label="Submit" 
           primary={true} 
           onClick={this.handleSubmit.bind(this)}/>
        </div>
    )
  }
}
Run Code Online (Sandbox Code Playgroud)

谁能告诉我哪里错了?

reactjs material-ui

9
推荐指数
2
解决办法
5009
查看次数

ReactJs如何显示带有更多选项的列表

我想用加载更多选项显示待办事项列表.我正在应用limit.Limit适用于list.But当我添加loadmore()函数.然后我得到错误this.state.limit是null我错了.任何人都可以建议我.这是我的代码todoList.jsx

var TodoList=React.createClass({
    render:function(){
    var {todos}=this.props;
    var limit = 5;

    function onLoadMore() {
        this.setState({
            limit: this.state.limit + 5
        });
    }
    var renderTodos=()=>{
            return todos.slice(0,this.state.limit).map((todo)=>{
                return(
                        <Todo key={todo.todo_id}{...todo} onToggle={this.props.onToggle}/>
                );
            });

    };

    return(
        <div>
            {renderTodos()}
            <a href="#" onClick={this.onLoadMore}>Load</a>
        </div>
        )
}
});
module.exports=TodoList;
Run Code Online (Sandbox Code Playgroud)

reactjs

8
推荐指数
1
解决办法
6799
查看次数

反应日期时间选择器 Css 不起作用

我正在使用react-dateTime Picker。react-datetime 选择器的 css 不起作用。谁能告诉我为什么它看起来像。它看起来像这样。 在此处输入图片说明

第二个这个下面的功能正在工作,但 css 正在工作。

var yesterday = Datetime.moment().subtract( 1, 'day' );
var valid = function( current ){
    return current.isAfter( yesterday );
};
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

reactjs react-datetime

4
推荐指数
1
解决办法
5735
查看次数

标签 统计

reactjs ×3

material-ui ×1

react-datetime ×1