React.js 如何从状态连接动态文本

Question

请考虑以下事项：

export default class MyComponent extends React.Component {
    constructor() {
        super();
    this.handleText1Change = this.handleText1Change.bind(this);
    this.handleText2Change = this.handleText2Change.bind(this);
    this.state = {
        text1 : '',
        text2 : '',
        text3 : `Type something into one of the text fields`
        }
    }

    handleText1Change = (e) => {
        e.preventDefault();
        this.setState({text1: e.target.value})
    }

    handleText2Change = (e) => {
        e.preventDefault();
        this.setState({text2: e.target.value})
    }

    render() {
        return(
        <div>
            <div class="d-flex flex-row bd-highlight mb-3">
              <div class="p-2 bd-highlight">
                  <label for="text1-box"><h4>Text1</h4></label><br />
                  <textarea 
                    type="text" 
                    value={this.state.text1} 
                    onChange={this.handleText1Change} />
              </div>
              <div class="p-2 bd-highlight">
                  <label for="text2-box"><h4>Text2</h4></label><br />
                  <textarea 
                    type="text" 
                    value={this.state.text2} 
                    onChange={this.handleText2Change} />
              </div>

              <div class="p-2 bd-highlight">
                  <label for="result"><h4>Combined Result</h4></label>
                  <br />
                  <p>{this.state.text1 ?
                      this.state.text1 :
                      this.state.text2 ?
                      this.state.text2 :
                      this.state.text1 && this.state.text2 ? 
                      this.state.text1 + this.state.text2 :
                      this.state.text3 }</p>
              </div>
            </div>
        </div>
        )
    }
}

如果在 Text1 或 Text2 的 textarea 中输入，我可以显示动态文本，但似乎无法根据条件this.state.text1 && this.state.text2组合动态文本。

我想在两个 textarea 框中键入任何文本并获取组合文本this.state.text1 + this.state.text2 （如我的三元语句中所指定）。

但它不起作用，它似乎只是渲染 OR 而不是 AND。

如何让它动态呈现连接的动态文本？ 这可能吗？

更清楚地说，如果我在第一个 textarea 中输入 'apple'，在第二个 textarea 中输入 'banana'，我希望它显示 'applebanana' 但它没有这样做，它只给出 'apple' 或 'banana' 并且失败在组合结果中呈现“applebanana”。

Answer 1

您的代码的问题是条件顺序，如果this.state.text1 or this.state.text2任何一个为真，您将永远不会达到this.state.text1 && this.state.text2条件，因为您有这些条件this.state.text1或this.state.text2在this.state.text1 && this.state.text2 this.state.text2之前，您需要在这些之前获取&&条件，

也不要使用嵌套的三元，这对眼睛来说真的很不舒服，使用函数和内部函数使用简单的 if else 条件并在 jsx 中调用该函数

---

function giveMeText(state) {
  if(state.text1 && state.text2){
    return state.text1 + state.text2
  }
  // so on
}

---

像这样调用 JSX 中的函数

<div> giveMeText(this.state) </div>