前提・実現したいこと
Reactで、ToDoアプリを作成しています。
Appコンポーネント、Formコンポーネント、Listコンポーネント、Itemコンポーネントに分けているのですが、
Formコンポーネントの中にあるチェックボックスにチェックを入れてsubmitしたら、
↓
ItemコンポーネントによってrenderされたToDoのタスクに「Important」と表示させたいと思っています。
FormコンポーネントはItemコンポーネントとはつながっていないため、上記のような処理をするのであればAppコンポーネントからpropsなりをItemコンポーネントに通して、Itemコンポーネント内で条件分岐などをしてメッセージを表示させたらいいのではないかと思うのですが、うまく出来ずにいます。どなたかやり方をご教授いただけないでしょうか。
該当のソースコード
React.js
1class App extends React.Component { 2 3 constructor(props){ 4 super(props) 5 this.state = { defaultList: todo, checked: false } 6 } 7 8 onSubmit = (task) => { 9 this.state.defaultList.unshift({task}); 10 this.setState(todo); 11 } 12 13 deleteTask = (i) => { 14 this.state.defaultList.splice(i, 1); 15 this.setState({defaultList: todo}) 16 } 17 18 handleCheckBox = () => { 19 this.setState({ checked: !this.state.checked }); 20 console.log("App.js", this.state.checked); 21 } 22 23 render() { 24 return ( 25 <div> 26 <Form 27 onSubmit = {this.onSubmit} 28 checkCheckBox = {this.handleCheckBox} 29 /> 30 <List 31 lists = {this.state.defaultList} 32 deleteTask = {this.deleteTask} 33 checked={this.state.checked} 34 /> 35 </div> 36 ); 37 } 38}
class Form extends React.Component { onFormSubmit = (event) => { event.preventDefault(); if(this.refs.userInput.value === "") { this.refs.warning.innerHTML = "Please enter a task"; } else { this.refs.warning.innerHTML = ""; this.props.onSubmit(this.refs.userInput.value); this.refs.userInput.value = ""; } } handleCheckClick = () => { this.props.checkCheckBox(); } render() { return ( <div> <form onSubmit={this.onFormSubmit}> <div> <label>Task</label> <input ref="userInput" /> <p ref="warning" className="warning"></p> </div> <div className="ui checkbox block"> <input type="checkbox" onChange={this.handleCheckClick} /> <label>Important</label> </div> <button className="ui button" type="submit">ADD</button> </form> </div> ); } }
const Item = ({task, priority, deleteItem}) => { return ( <ul> <li><b>{task}</b></li> <li>{priority && <span>{priority}</span>}</li> <li onClick={deleteItem}>Delete</li> </ul> ); }
const List = ({deleteTask, lists, checked}) => { const renderedList = lists.map((list, i) => { return ( <Item key={i} task = {list.task} priority = {list.priority} deleteItem = {deleteTask} checkPriority = {checked} /> ); }); return <div>{renderedList}</div> }
あなたの回答
tips
プレビュー