如何连接两个或多个TextInputs，React Native？ [复制]答案

【问题标题】：How to Concatenate two or more TextInputs, React Native? [duplicate]如何连接两个或多个TextInputs，React Native？ [复制]
【发布时间】：2017-11-07 04:57:30
【问题描述】：

我想在单击按钮时连接 textInputs。例如 text1=2 , text2=3 , text3=9 和 text4=8 ，最终结果应该是 2398。

如何做到这一点？

【问题讨论】：

获取每个输入的值并进行字符串连接：result = str1 + str2.
我知道欺骗链接在 jQuery 上而不是在 react 上，但它显示了如何并且这个逻辑可以与 React 集成

标签： javascript reactjs react-native concatenation textinput

【解决方案1】：

与Pure JS

function concatenate(){
var concatenate = document.getElementById("input1").value + document.getElementById("input2").value + document.getElementById("input3").value

document.getElementById("result").innerHTML = "Resultat:"+concatenate
}

<input id="input1" type="text" name="name1" >
<input id="input2" type="text" name="name2" >
<input id="input3" type="text" name="name3" >

<button type="button" onclick="concatenate()">concatenate</button>

<div id="result">Resultat: </div>

【讨论】：

【解决方案2】：

如果你使用的是 ES6 标准，你可以使用字符串字面量

const txt1 = 'rt';
const txt2 = 'rete';
const concatenated = `${txt1}${txt2}`

您可以参考以下链接进行进一步学习： https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/template_strings

【讨论】：

【解决方案3】：

为textInput创建一个onChangeHandler()如：

 <TextInput onChange={(text)=>(this.onChangeHandler("text1",text))}>
 <TextInput onChange={(text)=>(this.onChangeHandler("text2",text))}>
 <TextInput onChange={(text)=>(this.onChangeHandler("text3",text))}>

onChangeHandler=(name,value)=>{
    this.setState({[name]:value})
}

然后点击按钮：

onButtonClick=()=>{
    let finalText =this.state.text1+this.state.text2+this.state.text3
    console.log(finalText)  //prints the concatenated text.
}

【讨论】：