現在ReactにてTodoアプリケーションを作っています。
<TodoApp> <TodoCreator /> <TodoList /> </TodoApp>
全体はTodoを作るアプリケーションで、その中にTodoCreatorにてinputフィールドとbuttonを設置していて、
inputに言葉を入力するとbuttonをクリックした時に全体の持つstateが増えて、TodoListにてリスト表示をしております。
この場合上のinputフィールドとbuttonがTodoCreatorで、
その下に表示されているリストはTodoListです。
※ここでどうしてもできない問題が発生しました。
Todolistに<Checkbox onClick={this._onChange.bind(this))} />
のように左側のチェックボックスをクリックした時にこのコンポーネントが持つ_onChangeが発火するはずなのですが、bindしても{::this._onChange}をしてもなぜか
_onChange of undifined
のエラーが出てしまうのです。。
(ちなみに、ES6構文のエラーは全て試しましたので、ロジック的にできないのかと考えております。)
理由はリストにて表示しているので、
構築した後のListにonclickをしてもデータの流れは一方通行だと聞いたことがあるので、
もしかするとそのような問題なのかなあと思っております。
完成目標では_onChange関数で、選択したリストは斜線を引くとい風にしたいのです。
どうかよろしくお願いいたします。
↓問題になっているコードです。
class TodoValue extends React.Component{ _onDelete(i){ console.log(i); } render(){ return( <List> { this.props.todos.map(function(todo, i){ return <ListItem key={i} primaryText={todo.item} rightIcon={<ActionInfo />} leftCheckbox={<Checkbox onClick={this._onDelete.bind(this, i)} />} /> }) } </List> ); } }
↓全文です。
import React from 'react'; import ReactDOM from 'react-dom'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import injectTapEventPlugin from 'react-tap-event-plugin'; injectTapEventPlugin(); import TextField from 'material-ui/TextField'; import RaisedButton from 'material-ui/RaisedButton'; import {List, ListItem} from 'material-ui/List'; import Subheader from 'material-ui/Subheader'; import Divider from 'material-ui/Divider'; import Checkbox from 'material-ui/Checkbox'; import Toggle from 'material-ui/Toggle'; import ActionInfo from 'material-ui/svg-icons/action/info'; import { withGoogleMap } from "react-google-maps"; const style = { margin: 12, }; class TodoInput extends React.Component{ constructor(){ super(); this.state = { value: "" } } _onAdd(){ const newTodo = this.refs.inputText.getValue(); this.props.onAdd(newTodo) this.setState({ value: "" }); } _onChange(){ this.setState({ value: this.refs.inputText.getValue() }); } render(){ return( <div> <TextField hintText="ここにTodoを入力" ref="inputText" value={this.state.value} onChange={this._onChange.bind(this)} /> <RaisedButton label="追加" secondary={true} style={style} onClick={this._onAdd.bind(this)} /> </div> ); } } class TodoValue extends React.Component{ _onDelete(i){ console.log(i); } render(){ return( <List> { this.props.todos.map(function(todo, i){ return <ListItem key={i} primaryText={todo.item} rightIcon={<ActionInfo />} leftCheckbox={<Checkbox onClick={this._onDelete.bind(this, i)} />} /> }) } </List> ); } } class TodoApps extends React.Component{ constructor(){ super(); this.state = { todos: [] } this.onAdd = this.onAdd.bind(this); } onAdd(newTodo){ this.setState({ todos: this.state.todos.concat({item:newTodo, status:0}) }); } render(){ return( <MuiThemeProvider> <div> <TodoInput onAdd={this.onAdd} /> <TodoValue todos={this.state.todos} /> </div> </MuiThemeProvider> ); } } ReactDOM.render(<TodoApps />, document.getElementById("content"));
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/20 00:42