Question

我对React.js和javascript来说非常陌生（我更是C＃程序员）。我的节点应用程序遇到了这个问题，这让我发疯了！

基本上我想创建一个文本区域，当单击按钮时，它将在另一个区域中显示文本（出于此测试目的，将文本显示在按钮下方的h1标签中）。

我设法从文本区域存储了文本，并在单击按钮时触发了布尔值true……但是它不会显示文本。我的逻辑思维过程是保存写入文本区域的所有内容，但是只有在单击按钮且布尔值为true时，它才会显示在应用程序的其他位置，或者在这种情况下为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社区！如果您或其他人感兴趣，我会发布一个hooks版本。

首先，让我们为h1创建一个单独的组件。这将替换emailStats变量。

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

这将返回我们作为电子邮件道具传递的任何内容（我在这里做了一些分解，以避免使用props.email语法）。

现在让我们创建父组件。为了清楚起见，我将其称为“ HookVersion”。首先，我们使用useState挂钩设置状态。 电子邮件和 buttonPushed 当前设置为“”（空字符串），为false。

这反映了您 emailField 和 buttonPush

的状态

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

接下来，我们设置handleChange函数，使其在用户键入文本区域时运行。在其中，我们调用 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。如果 buttonPushed 为true，则传递电子邮件和仅呈现。这种有条件的渲染是因为JavaScript具有此方便的有条件的&&运算符，如果先前的值为true，则只会返回组件。

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>;
}

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

2 个答案: