class Todo extends React.Component {
constructor(props) {
super(props);
this.state = {
saveText: '',
}
this.handleSaveText = this.handleSaveText.bind(this);
this.displayText = this.displayText.bind(this);
}
handleSaveText(saveText) {
this.setState({
saveText: saveText
})
}
render() {
return (
<div>
<Save saveText = {this.state.saveText}
onSaveTextChange = {this.handleSaveText}
/>
<Display saveText = {this.state.saveText}
/> </div>
);
}
}
class Save extends React.Component {
constructor(props) {
super(props);
this.handleSaveText = this.handleSaveText.bind(this);
}
handleSaveText(e) {
this.props.onSaveTextChange(e.target.value);
}
render() {
return ( <div>
<input type = "text"
value = {
this.props.saveText
}
onChange = {
this.handleSaveText
}
/> <input type = "button"
value = "save"
onClick = {
this.displayText
}
/> </div>
);
}
}
class Display extends React.Component {
render() {
var todos = [];
var todo = this.props.saveText;
//todos.push(todo);
return ( <div> {
todos
} </div>
);
}
}
ReactDOM.render( <Todo / > ,
document.getElementById('root')
)<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>我仍然想弄清楚状态如何工作，对此我是新来的人。我正在尝试实现一个简单的待办事项应用程序，该应用程序接受输入并在单击按钮后在屏幕上显示输出。
根据最小的UI表示，我将UI分为两部分，第一部分包含Save类，该类具有一个输入框和一个按钮。第二个包含显示类，它将显示输入框的内容。
我在状态中存储输入框的值。
如何将该状态传递给Display类并在屏幕上显示值？
Codepen Link
最佳答案
这是待办事项 list 的工作示例。
class Todo extends React.Component {
constructor(props) {
super(props);
this.state = {
text: '',
list: []
}
// this.handleSaveText = this.handleSaveText.bind(this);
this.addTodo = this.addTodo.bind(this);
}
handleSaveText(text) {
this.setState({
text: text
})
}
addTodo(saveText) {
var list = this.state.list;
list.push(saveText);
this.setState({
list: list
});
// to save to localstorage, uncomment below line
// window.localStorage.setItem('todos', list);
}
render() {
return ( <
div >
<
Save text = {
this.state.text
}
onClick = {
this.addTodo
}
/> <
Display list = {
this.state.list
}
/> < /
div >
);
}
}
class Save extends React.Component {
constructor(props) {
super(props);
this.state = {
input: this.props.text || '',
}
this.onChange = this.onChange.bind(this);
this.addToTodo = this.addToTodo.bind(this);
}
onChange(e) {
this.setState({
input: e.target.value
});
}
addToTodo() {
this.props.onClick(this.state.input);
this.setState({
input: ''
});
}
render() {
return ( < div >
<
input type = "text"
value = {
this.state.input
}
onChange = {
this.onChange
}
/> <input type = "button"
value = "save"
onClick = {
this.addToTodo
}
/> </div >
);
}
}
class Display extends React.Component {
constructor(props) {
super(props);
this.state = {
todos: []
}
}
componentWillReceiveProps(nextProps) {
this.setState({
todos: nextProps.list
});
}
render() {
var i = 1;
var renderList = this.state.todos.map((name) => {
return <div key = {
i++
} > {
name
} < /div>;
});
return ( < div > {
renderList
} < /div>);
}
}
ReactDOM.render( < Todo / > ,
document.getElementById('root')
)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My React Project on CodePen</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/4.1.0/sanitize.css">
<link rel="stylesheet" href="css/style.processed.css">
</head>
<body>
<div id="root"></div>
<script src="https://npmcdn.com/react@15.3.0/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js"></script>
</body>
</html>如果您尝试创建待办事项列表，则可以通过在主TODO组件中添加数组列表进行微调，然后将其向下显示组件。
保存组件，您只需要处理输入更改和单击功能。
很简单。