javascript - 将文本输入焦点放在单击的 TouchableHighlight 上

Question

我有一个类，我希望其中的文本输入集中于所选的父级。

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

我尝试添加

autoFocus={true}

我也尝试过添加

ref={this.props.index}

但是当我尝试集中注意力时，它告诉我它未定义 (this.refs[this.props.index].focus();)

我希望它在启用“可编辑”状态时能够聚焦，我不知道为什么这看起来如此困难。我的背景更多是 C#、Angular 2+ 等，所以也许 React 的结构方式让我困惑

Answer 1

在 TouchableHighlight 的 onPress 事件上设置 State editable: true 并设置 autoFocus={this.state.editable}在TextInput..它将工作

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