javascript - React js 状态管理

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>

我是 React 的新手，仍在尝试弄清楚状态是如何工作的。我正在尝试实现一个简单的待办事项应用程序，该应用程序接受输入并在单击按钮后在屏幕上显示输出。

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

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

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

代码笔 Link

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')
)

您不能在 render 方法中推送到数组，因为当它从您再次单击按钮接收到新 Prop 时重新呈现后，它将不再存在。我的方法将以前的响应数组保存为“displayText”并将其发送到显示组件。请注意，此方法会将整个数组显示为没有空格的单行。在实践中，你会想通过这样做来映射它:

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