React js state management

Question

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>

我是新手的反应，仍在尝试弄清楚状态的工作方式。我正在尝试实现一个简单的todo应用程序，该应用在单击按钮后在屏幕上显示输出并在屏幕上显示输出。

根据最小UI表示形式，我将UI分为两个部分，第一个包含具有输入框和一个按钮的保存类。第二个包含一个显示类，该类将显示输入框的内容。

我在状态下存储输入框的值。

如何将该状态传递到显示类中并在屏幕上显示值？

codepen链接

Answer 1

这将做到：

class Todo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      saveText: '',
      displayText: []
    }
    this.handleSaveText = this.handleSaveText.bind(this);
    this.displayText = this.displayText.bind(this);
  }
  handleSaveText(saveText) {
    this.setState({
      saveText: saveText
    })
  }
  displayText(text) {
    let newDisplay = this.state.displayText;
    newDisplay.push(text);
    this.setState({displayText: newDisplay});
  }
  render() {
    return (
      <div>
      <Save saveText = {this.state.saveText}
      onSaveTextChange = {this.handleSaveText}
      displayText={this.displayText}
      /> 
      <Display displayText = {this.state.displayText}
      /> </div>
    );
  }
}
class Save extends React.Component {
  constructor(props) {
    super(props);
    this.handleSaveText = this.handleSaveText.bind(this);
    this.displayText = this.displayText.bind(this);
  }
  handleSaveText(e) {
    this.props.onSaveTextChange(e.target.value);
  }
  displayText() {
    this.props.displayText(this.props.saveText);
  }
  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() {
    return ( <div> {
        this.props.displayText
      } </div>
    );
  }
}
ReactDOM.render( <Todo / > ,
  document.getElementById('root')
)

您无法将渲染方法中的数组推到数组，因为它再次从您再次单击按钮后重新呈现后不再存在。我的方法将一系列先前的响应保存为" DisplayText"，并将其发送到显示组件。请注意，此方法将将整个数组显示为没有空格的单行。在实践中，您需要这样做：

this.props.displayText.map((text, idx) => (<div key={idx}>{text}</div>));

Answer 2

这是托尔列表的工作示例。

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组件中添加数组列表来进行一些调整，然后将其向下显示以显示组件。

保存组件您只需要处理输入更改和单击功能。

很简单。

Answer 3

您必须使用：

componentWillReceiveProps(nextProps)

在您的显示组件中。

这是一个工作示例：

class Todo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: []
    }
    this.handleSaveText = this.handleSaveText.bind(this);
  }
  handleSaveText(saveText) {
    let todos = this.state.todos;
    todos.push(saveText);
    this.setState({
      todos: todos
    });
  }
  render() {
    return (
      <div>
      <Save
      onSaveTextClick = {this.handleSaveText}
      /> 
      <Display todos = {this.state.todos}
      /> </div>
    );
  }
}
class Save extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      saveText: ''
    }
    this.handleSaveText = this.handleSaveText.bind(this);
    this.handleChangeText = this.handleChangeText.bind(this);
  }
  handleChangeText(e){
    this.setState({saveText: e.target.value});
  }
  handleSaveText(e) {
    this.props.onSaveTextClick(this.state.saveText);
  }
  render() {
    return ( <div>
      <input type = "text"
      onChange = {
        this.handleChangeText
      }
      /> <input type = "button"
      value = "save"
      onClick = {
        this.handleSaveText
      }
      /> </div>
    );
  }
}
class Display extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      todos: []
    }
  }
  componentWillReceiveProps(nextProps){
    this.setState({todos: nextProps.todos});
  }
  
  render() {
    let todos = this.state.todos.map((todo)=>{return <div>{todo}</div>});
    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>
<div id="root"></div>