javascript - 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 的文本区域中输入内容时我可以显示动态文本，但似乎无法根据条件 this.state.text1 && this.state.text2 组合动态文本。

我想在两个文本区域框中输入任何文本并获取组合文本 this.state.text1 + this.state.text2 (如我的三元语句中所指定)。

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

如何让它动态渲染串联的动态文本？这可能吗？

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

Answer 1

您的代码问题在于条件的顺序，如果 this.state.text1 或 this 中的任何一个，您将永远不会达到 this.state.text1 && this.state.text2 条件.state.text2 为 true，因为在 this.state.text1 && 之前有这些条件 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>