Javascript 在触摸屏上聚焦文本输入高亮显示已单击

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

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

class ListItem扩展了React.PureComponent{
建造师（道具）{
超级（道具）；
此.state={
可编辑：this.props.item.editable，
value:this.props.item.value，
标题：this.props.item.heading，
项目：this.props.item.item，
}
}
_onPress=（）=>{
this.setState（{editable:true}）；
this.props.onPressItem（this.props.index，this.props，this.state）；
}
_onSearchTextChanged=（事件）=>{
this.setState（{value:event.nativeEvent.text}）；
};
_handleSaveEvent=（e）=>{
this.setState（{editable:false}）；
警报（“工作”）；
//加载项保存项
}
render（）{
var editable=this.state.editable；
var heading=this.state.heading；
var值=this.state.value；
返回(
{标题}：
{this.state.editable？
: 
{value}
}
{}
);
}
}

我试着加上

自动对焦={true}

我也试着加上

ref={this.props.index}

但是当我尝试聚焦时，它告诉我它没有定义（this.refs[this.props.index].focus（）；）

---

我希望当“可编辑”状态被启用时，它会成为焦点，我不知道为什么这看起来如此困难。我的背景更多的是C#，Angular 2+等，所以可能是react的结构让我感到困惑

你可以试试这个。在

中提供ref作为函数，如下所示：

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

this.inputText=ref}
style={style.searchInput}
keyboardType=“默认值”
占位符=“键入任何内容”
returnKeyType=“完成”/>

现在，请按以下方式聚焦

上的

：

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

this.inputText.focus（）}>
点击

---

这应该行得通。如果有任何问题，请告诉我。

您可以试试这个。在

中提供ref作为函数，如下所示：

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

this.inputText=ref}
style={style.searchInput}
keyboardType=“默认值”
占位符=“键入任何内容”
returnKeyType=“完成”/>

现在，请按以下方式聚焦

上的

：

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

this.inputText.focus（）}>
点击

---

这应该行得通。如果有任何问题，请告诉我。

在文本输入中的

on press

事件的

TouchableHighlight

setState

editable:true

和set

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}
            />

---

在

触控突出显示的
事件的
上，在文本输入中设置
自动对焦={this.state.editable}

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


你能在
TextInput
中尝试
autoFocus={this.state.editable}
并尝试一下吗？@AravindS工作得很好，但我可以发誓我以前做过。无论如何，我很感激！你应该把它写成一个恰当的答案，这样我才能接受它的真实性。。我会写答案你能试试
TextInput
中的
autoFocus={this.state.editable}
，然后试试吗？@AravindS做得很好，但我可以发誓我以前做过。无论如何，我很感激！你应该把它写成一个恰当的答案，这样我才能接受它的真实性。。我会写答案的