在 React.js 中顯示保存的文本 onclick

Question

一般來說，我對React.js和 javascript 非常非常陌生（我更像是一個 C# 程序員）。 我在我的節點應用程序中遇到了這個問題，這讓我抓狂！

基本上我想創建一個文本區域，當單擊一個按鈕時它會在另一個區域顯示文本（出於此測試目的，在按鈕下方的 h1 標簽中呈現該文本）。

我設法存儲文本區域中的文本並在單擊按鈕時將 bool 觸發為真...但它不會顯示文本。 我的邏輯思維過程是保存寫入文本區域的任何內容，但只有當單擊按鈕並且 bool 為真時，它才會顯示在應用程序的其他地方，或者在本例中為 h1 標簽。

 import React, {Component} from 'react'; import './App.css'; class App extends Component { constructor(props) { super(props); this.state = { emailField: [], buttonPushed: false }; } handleChange = (e) => { this.setState({emailField: e.target.value}); } buttonPushedHandler = () => { this.setState({buttonPushed:true}); } displayText = () => { if(this.state.buttonPushed) { return ( <h1>{this.state.email}</h1> ) } } render() { return ( <div className='App'> <h4>Create your post below:</h4> <textarea className='text-saver' onChange={this.handleChange} /> <br/> <button onClick={this.buttonPushedHandler}>Display Post</button> <br/><br/><br/> {this.displayText} </div> ) } } export default App;

任何幫助將不勝感激:)

Answer 1

您可以使用條件渲染來顯示文本區域的文本。

試試下面的代碼。

 class App extends React.Component { constructor(props) { super(props); this.state = { emailField: '', buttonPushed: false }; } handleChange = (e) => { this.setState({ emailField: e.target.value }); } buttonPushedHandler = () => { this.setState({ buttonPushed: true }); } render() { let emailStats = null; if (this.state.buttonPushed) { emailStats = (<h1>{this.state.emailField}</h1>); } return ( <div className='App'> <h4>Create your post below:</h4> <textarea className='text-saver' onChange={this.handleChange} /> <br /> <button onClick={this.buttonPushedHandler}>Display Post</button> <br /><br /><br /> {emailStats} </div> ) } } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"> loading..... </div>

Answer 2

歡迎來到 React 社區。 如果您或其他任何人感興趣，我會發布一個掛鈎版本。

首先，讓我們為 h1 創建一個單獨的組件。 這將替換 emailStats 變量。

function EmailStats({ email }) {
  return <h1>{email}</h1>;
}

這將返回我們作為 email prop 傳入的任何內容（我在這里做了一些解構以避免 props.email 語法）。

現在讓我們創建父組件。 為了清楚起見，我將其稱為“HookVersion”。 首先，我們使用 useState 掛鈎設置 state。 Email和buttonPushed當前設置為“”（空字符串）和 false。

這反映了emailField和 buttonPush 的state

function HookVersion() {
   const [email, setEmail] = useState("");
   const [buttonPushed, setButtonPushed] = useState(false);
   // ...We'll see the rest soon
}

接下來，我們將 handleChange function 設置為在用戶在文本區域中鍵入時運行。 在其中，我們調用setEmail掛鈎將 e.target.value 的值設置為我們的 email 變量。

到現在為止，所有的邏輯都是一樣的，只是有鈎子。

function HookVersion() {
    //...
    function handleChange(e) {
        const { value } = e.target; // more destructoring...it reads clearer to me
        setEmail(value);
    }
    //...more to come
}

接下來，我們使用條件組件EmailStats （我們之前制作的組件）渲染 HTML。 我們傳入email並且僅在buttonPushed為真時才渲染。 這種條件渲染是因為 JavaScript 有這個方便的條件 && 運算符，它只會在先前的值為真時返回組件。

function HookVersion() {
      //... all of the state
      return (
        <div className="App">
          <h4>Create your post below:</h4>
          <textarea className="text-saver" onChange={handleChange} />
          <br />
          <button onClick={setButtonPushed(true)}>Display Post</button>

          <br />
          <br />
          <br />

          {buttonPushed && <EmailStats email={email} />}
        </div>
      );
}

為清楚起見，這里是完整版本。

function HookVersion() {
  const [email, setEmail] = useState("");
  const [buttonPushed, setButtonPushed] = useState(false);
  function handleChange(e) {
    const { value } = e.target;
    setEmail(value);
  }

  return (
    <div className="App">
      <h4>Create your post below:</h4>
      <textarea className="text-saver" onChange={handleChange} />
      <br />
      <button onClick={setButtonPushed(true)}>Display Post</button>

      <br />
      <br />
      <br />

      {buttonPushed && <EmailStats email={email} />}
    </div>
  );
}

function EmailStats({ email }) {
  return <h1>{email}</h1>;
}