代码之家 › 专栏 › 技术社区 › Cacoon

将文本输入聚焦在点击的可触摸高光上

react-native javascript

Cacoon · 技术社区 · 6 年前

我有一个类,我希望其中的文本输入集中在被选择的父类上。

class ListItem extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
           editable: this.props.item.editable,
           value: this.props.item.value,
           heading: this.props.item.heading,
           item: this.props.item.item,
        }
    }

    _onPress = () => {
        this.setState({ editable: true});
        this.props.onPressItem(this.props.index, this.props, this.state);
    }

    _onSearchTextChanged = (event) => {
        this.setState({ value: event.nativeEvent.text });
      };

    _handleSaveEvent = (e) => {
        this.setState({ editable: false });
        alert('works');
        //Add in saving item
    }

    render() {
      var editable = this.state.editable;
      var heading = this.state.heading;
      var value = this.state.value;
      return (
        <TouchableHighlight onPress={this._onPress} underlayColor='#dddddd'>
          <View>
            <View style={styles.rowContainer}>
              <View style={styles.textContainer}>
                <Text style={styles.title}>{heading}: </Text>
                {this.state.editable? 
                    <TextInput
                        style={styles.searchInput}
                        value={value.toString()}
                        onChange={this._onSearchTextChanged}
                        keyboardType="default"
                        returnKeyType="done"
                        onSubmitEditing={this._handleSaveEvent}/>
                : 
                    <Text style={styles.price}>{value}</Text> 
                }
                {}
              </View>
            </View>
            <View style={styles.separator}/>
          </View>
        </TouchableHighlight>
      );
    }
  }

我试着加上

自动对焦{true}

我也试着加上

ref={this.props.index}

但当我试图聚焦时,它告诉我它没有定义(this.refs[this.props.index].focus();)

我希望在启用“可编辑”状态时集中精力,我不知道为什么这看起来如此困难。我的背景更多的是C,角2+等,所以也许它的反应结构正是把我抛在脑后

2 回复 | 直到 6 年前

Aravind S 6 年前

上 onPress 事件 TouchableHighlight 设置状态 editable: true 并设置 autoFocus={this.state.editable} 在文本输入中..它将工作

            <TextInput
                style={styles.searchInput}
                value={value.toString()}
                onChange={this._onSearchTextChanged}
                keyboardType="default"
                autoFocus={this.state.editable}
                returnKeyType="done"
                onSubmitEditing={this._handleSaveEvent}
            />

Roshan Gautam 6 年前

你可以试试这个。在中提供ref作为函数 <TextInput /> 这样地:

<TextInput
        ref ={ref => this.inputText = ref}
        style={styles.searchInput}
        keyboardType="default"
        placeholder="Type anything"
        returnKeyType="done"/>

现在开始 <Button /> onpress,集中注意力 <文本输入/> 这样地:

<TouchableHighlight onPress={() => this.inputText.focus()}> 
    <Text>Click</Text>
</TouchableHightlight>

这应该管用。如果有什么问题请告诉我。