React Native add text to TextInput on按钮点击
我想在React Native中创建一个搜索域，它的工作原理类似于我的网页https://todayin.de/上的搜索域。
到目前为止，我所做的工作如下：
class SearchField extends React.Component {
constructor(props){
super(props);
this.state = {text: ''};
this.U9 = '#U9';
}
render() {
return(
<View>
<TextInput
autoCorrect={false}
autoFocus={false}
placeholder="#Kicker #Moabit"
onChangeText={(text) => this.setState({text})}
value={this.state.text}
onSubmitEditing={(event) => this.startSearch()}
/>
<Button
style={{fontSize: 20, color: 'green'}}
styleDisabled={{color: 'red'}}
onPress={this.addTagToInput.bind(this)}
>
{this.U9}
</Button>
</View>
);
}
startSearch(){
alert(this.state.text);
}
addTagToInput(event){
this.state = {text: this.state.text + " " + this.U9};
}
}
module.exports = SearchField;当我在TextInput中输入搜索文本时，它可以正常工作，并在提交时显示在alert()中。我现在想要实现的是，当我单击按钮" #U9“时，我希望将字符串#U9附加到文本输入并显示它。现在，如果我输入文本"test"，点击"#U9“按钮并提交，我会收到"test #U9”的提示。问题是，#U9没有显示在输入字段中。如何在单击按钮时更新文本输入？
对于微调，我想在foreach中添加按钮和相应的值，以避免重复10次相同的代码。如果any1对此也有建议，我很想听听！
对于非常非常精细的调整，我想做以下操作:在第一个按钮上单击:将#U9附加到文本。单击第二个按钮:从文本中删除#U9。
非常感谢你的帮助！
干杯，奥利弗
回答 3
Stack Overflow用户
发布于 2016-05-25 23:36:54
您只是重新分配状态字段，而不是调用setState。试一试
addTagToInput(event){
this.setState({text: this.state.text + " " + this.U9});
}React使用setState重新分配状态字段，并通知框架此组件需要重新呈现
请参阅setState文档
编辑:要做的第一件事是将按钮的呈现逻辑移动到它的onw函数中，并更新事件处理程序以将标记名作为参数
renderButton(tag){
return (<Button
style={{fontSize: 20, color: 'green'}}
styleDisabled={{color: 'red'}}
onPress={this.addTagToInput.bind(tag)}>
{tag}
</Button>);
}
addTagToInput(tag){
this.setState({text: this.state.text + " " + tag});
}然后将U9变量替换为标记列表
constructor(props){
super(props);
this.state = {text: ''};
this.tags = ['#U9'];
}并将正常的按钮呈现代码替换为标记上的地图
render() {
return(
<View>
<TextInput
autoCorrect={false}
autoFocus={false}
placeholder="#Kicker #Moabit"
onChangeText={(text) => this.setState({text})}
value={this.state.text}
onSubmitEditing={(event) => this.startSearch()}
/>
{this.tags.map(this.renderButton)}
</View>
);
}这会将所有标记呈现为按钮，并将它们的值传递给事件处理程序
Stack Overflow用户
发布于 2016-05-26 16:53:46
非常感谢你的帮助@wegrata！
当我调用renderButton onPress函数时，我得到了一个“未定义的不是一个对象”。这意味着在renderButton()中不再定义函数this.addTagToInput。
所以我所做的就是把它传递给函数，下面是完整的代码：
class SearchField extends React.Component {
constructor(props){
super(props);
this.state = {text: ''};
this.tags = ['#U9', '#Shisha','#Kicker'];
}
render() {
return(
<View>
<TextInput
autoCorrect={false}
autoFocus={false}
placeholder="#Kicker #Moabit"
onChangeText={(text) => this.setState({text})}
value={this.state.text}
onSubmitEditing={(event) => this.startSearch()}
/>
{this.tags.map(this.renderButton.bind(this))}
</View>
);
}
renderButton(tag){
return (<Button
style={{fontSize: 20, color: 'green'}}
styleDisabled={{color: 'red'}}
onPress={this.addTagToInput.bind(this, tag)}>
{tag}
</Button>);
}
startSearch(){
alert(this.state.text);
}
addTagToInput(tag){
this.setState({text: this.state.text + " " + tag});
}
}
module.exports = SearchField;Stack Overflow用户
发布于 2017-08-23 12:14:37
应该调用this.setState()方法，而不是直接将object赋值给this.state。
这段代码应该可以工作
addTagToInput(event){
this.setState({text: this.state.text + " " + this.U9});
}https://stackoverflow.com/questions/37441296
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号