无法添加项目和更新状态是react.js

Question

我无法发现代码有什么问题。我通过props传递状态，newItem确实通过但我无法更新Todos组件中的状态。

class AddTodo extends React.Component {
  constructor(){
    super();
    this.state = {text: ''};
  }
  onTextChanged(e){
    this.setState({text:e.target.value});
  }
  addHandler(){
    this.props.addTodo(this.state.text);
  }
  render() {
    return(
      <div>
        <input type="text" onChange={(e)=>this.onTextChanged(e)} />
        <button onClick={()=>this.addHandler()}>Add</button>
      </div>
    )
  }
}

class Todos extends React.Component {
  constructor(){
    super();
    this.state = {data: ['write book','wash clothes','jogging']};
  }
  addTodo(item){
    const newData = [...this.state.data, item]; //problem is here
    this.setState({ data: newData }); //problem is here
    console.log(this.state.data)
  }
  render() {
    return (      
      <div>
        <AddTodo addTodo={(item)=>this.addTodo(item)}/>
        <ul>
         {this.state.data.map((item)=><TodoItems key={item} item={item}/>)}
        </ul>
      </div>
    ); 
  }
}

http://jsbin.com/nitibinale/1/edit?html,js,console,output

Answer 1

您的代码是正确的，这可能是JSBin的一个错误，以及它如何使用Babel处理转换

class AddTodo extends React.Component {
  constructor(){
    super();
    this.state = {text: ''};
  }
  onTextChanged(e){
    this.setState({text:e.target.value});
  }
  addHandler(){
    this.props.addTodo(this.state.text);
  }
  render() {
    return(
      <div>
        <input type="text" onChange={(e)=>this.onTextChanged(e)} />
        <button onClick={()=>this.addHandler()}>Add</button>
      </div>
    )
  }
}

class Todos extends React.Component {
  constructor(){
    super();
    this.state = {data: ['write book','wash clothes','jogging']};
  }
  addTodo(item){
    const newData = [...this.state.data, item]; //problem is here
    this.setState({ data: newData }); //problem is here
    console.log(this.state.data)
  }
  render() {
    return (      
      <div>
        <AddTodo addTodo={(item)=>this.addTodo(item)}/>
        <ul>
         {this.state.data.map((item)=><TodoItems key={item} item={item}/>)}
        </ul>
      </div>
    ); 
  }
}

class TodoItems extends React.Component {
  constructor(props){
    super()
    this.state = {
      text: props.item,
      isEditing: false
    };
  }
  onClickEdit(){
    this.setState({isEditing: !this.state.isEditing});
  }
  onSaveEdit(e){
    this.setState({
        isEditing: false,
        text: this.state.text
      });
  }
  onTextChanged(e){
    this.setState({text: e.target.value});
  }
  onEnter(e){
    if(e.charCode === 13){
      this.setState({
        isEditing: false,
        text: this.state.text
      });
    }
  }
  render(){ 
    return(
      <div>
      
      <li>
      {this.state.isEditing ? '' : <span>{this.state.text}</span>}

      {this.state.isEditing ? <span><input value={this.state.text} onKeyPress={(e)=>this.onEnter(e)} 
    type="text" onChange={(e)=>this.onTextChanged(e)}/></span> :''}
  &nbsp;&nbsp;
      {this.state.isEditing ? '' : <button onClick={()=>this.onClickEdit()}>Edit</button>}

      {this.state.isEditing ? <button onClick={()=>this.onSaveEdit()}>Save</button> : ''}
      </li>
      </div>
    )
  }
}

React.render(
  <Todos />,
  document.getElementById('react_example')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="react_example"></div>

Answer 2

看看这个：https://jsfiddle.net/0mhvbnhx/

class AddTodo extends React.Component {
  constructor(){
    super();
    this.state = {text: ''};
  }
  onTextChanged(e){
    this.setState({text:e.target.value});
  }
  addHandler() {
    this.props.addTodo(this.state.text);
    this.setState({ text: '' });
  }
  render() {
    return(
      <div>
        <input type="text" value={this.state.text} onChange={(e)=>this.onTextChanged(e)} />
        <button onClick={()=>this.addHandler()}>Add</button>
      </div>
    )
  }
} 

class Todos extends React.Component {
  constructor(){
    super();
    this.state = {
      data: ['write book','wash clothes','jogging']
    };
  }
  addTodo = (item) => {
    const data = [...this.state.data, item];
    this.setState({ data });
  }
  changeTodo = (i, text) => {
    const data = [...this.state.data];
    data[i] = text;
    this.setState({ data });
  }
  render() {
    return (      
      <div>
        <AddTodo addTodo={this.addTodo}/>
        <ul>
         {this.state.data.map((item, i)=>
            <TodoItems key={i} index={i} item={item} changeTodo={this.changeTodo}/>
          )}
        </ul>
      </div>
    ); 
  }
}

class TodoItems extends React.Component {
  constructor(props){
    super()
    this.state = {
      isEditing: false,
      text: '',
    };
  }
  onClickEdit(){
    this.setState({isEditing: !this.state.isEditing, text: this.props.item});
  }
  onSaveEdit(){
    this.props.changeTodo(this.props.index, this.state.text);
    this.setState({
      isEditing: false,
    });
  }
  onTextChanged(e){
    this.setState({text: e.target.value});
  }
  onEnter(e) {
    if(e.charCode === 13){
      this.onSaveEdit();
    }
  }
  render(){ 
    return(
      <div>

      <li>
      {this.state.isEditing ? '' : <span>{this.props.item}</span>}

      {this.state.isEditing ? <span><input value={this.state.text} onKeyPress={(e)=>this.onEnter(e)} 
    type="text" onChange={(e)=>this.onTextChanged(e)}/></span> :''}
  &nbsp;&nbsp;
      {this.state.isEditing ? '' : <button onClick={()=>this.onClickEdit()}>Edit</button>}

      {this.state.isEditing ? <button onClick={()=>this.onSaveEdit()}>Save</button> : ''}
      </li>
      </div>
    )
  }
}

React.render(
  <Todos />,
  document.getElementById('react_example')
);

Answer 3

我相信Shubham的回答是正确的。如果您从相关问题查看answer，您会发现您可能需要在顶部添加// noprotect编译指示以使JS Bin工作。你的代码工作正常。

除此之外：您可能需要考虑使用setState（link）的回调版本，因为它是异步的，如果您按照自己的方式访问它，this.state可能并不总是一致的目前正在。

Answer 4

您的问题分为两部分：

this.RequiresPointer = RequiresPointer.WhenFocused;

我刚修好你的文件，检查一下。 http://jsbin.com/pajoliboqi/1/edit?js,console,output