Question

我想在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。

非常感谢你的帮助！

干杯，奥利弗

Answer 1

您只是重新分配状态字段，而不是调用setState。尝试

awk 'BEGIN { FS = OFS = "|" } { print $0, $1 "_" $2 }' .someFile

React使用setState重新分配state字段并通知框架该组件需要重新呈现

请参阅setState文档

编辑：首先要做的是将按钮的渲染逻辑移动到它的onw函数中，并更新事件处理程序以将标记名称作为参数

addTagToInput(event){
    this.setState({text: this.state.text + " " + this.U9});
}

然后用标签列表替换U9 varialbe

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

用标签上的地图替换正常的按钮渲染代码

constructor(props){
    super(props);
    this.state = {text: ''};
    this.tags = ['#U9'];
}

这会将所有标记呈现为按钮，并将其值传递给事件处理程序

Answer 2

非常感谢你帮助@wegrata！

调用renderButton onPress函数时，我得到了“undefined不是对象”。这意味着在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;

Answer 3

您应该调用this.setState()方法，而不是直接将对象分配给this.state。

此代码应该可以使用

addTagToInput(event){
    this.setState({text: this.state.text + " " + this.U9});
}

单击按钮

3 个答案: