アイテムを追加できませんでした。状態を更新しました。react.js

コードに何が間違っているか分かりませんでした。私は小道具を経由して状態を渡しますが、newItemは通り過ぎましたが、Todosの状態で状態を更新できませんでした。アイテムを追加できませんでした。状態を更新しました。react.js

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

出典

2017-01-09 Thian Kian Phin

インスタンスに 'AddTodo'関数をバインドしていますか？私は匿名の関数を見ていますが、 'this'は間違った値になります。コンソールには何もありませんか？あなたはどのようなステップをデバッグしましたか？ –

@DaveNewtonなぜ私はバインドする必要がありますか？ es6の矢の機能はここで仕事をしないのですか？ –

@DaveNewton http://jsbin.com/pajoliboqi/1/editは私もes6を使わないと動作しません –

あなたのコードが正しい、これはおそらくJSBinのバグであり、それはバベル

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>

出典

2017-01-09 16:56:32

-1

あなたの問題は二つの部分である：私はちょうどあなたのファイルに固定

1- You forgot to set the variable in setState 
2- You have a problem with your ItemTodo

、それをチェックアウト。この時http://jsbin.com/pajoliboqi/1/edit?js,console,output

出典

2017-01-09 16:29:35 damianfabian

あなたのリンクがうまくいきません –

ルック：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') 
);

出典

2017-01-09 16:35:28

これはうまくいきましたが、私は必要ないと思っています。 –

@ JennyMokどちらですか？ –

changeTodo、なぜそれが必要ですか？ –

でtranspilationの処理方法私はShubhamが彼の答えで正しいと信じている。関連する質問からanswerを見ると、JS Binが機能するためには、おそらく先頭に// noprotectプラグマを追加する必要があることがわかります。あなたのコードは正常に動作します。別に

：それは非同期であり、そしてあなたはそれをあなたが現在いる道にアクセスする場合this.stateは必ずしも一致しない場合がありますので、あなたはsetState（link）のコールバックバージョンを使用して検討する必要があります。

出典

2017-01-09 17:36:17 jfairbank

アイテムを追加できませんでした。状態を更新しました。react.js

答えて

関連する問題