Question

给出下面的组件，我无法键入TextInput，然后写信然后删除，这似乎是在更新状态。有任何线索吗？

class myContainerComponent extends Component {   
  constructor(props) {
    super(props)
    this.onChange = this.onChange.bind(this)
  }
  onChange(value) {
    this.setState({
      value
    })
  }
  render() {
    return (
      <PresentationalComponent 
        onChange={this.onChange}
        value={this.state.value}
      />
    )
  }    
}    
class PresentationalComponent extends Component {
  render() {
    return(
      <TextInput 
        onChangeText={this.props.onChange}
        value={this.props.value}
      />
    )
  }

}

有任何线索吗？

Answer 1

将此添加到您的 myContainerComponent 构造函数中：

this.state = {
  value: '',
}

Answer 2

您应该在构造函数中初始化状态：

constructor(props){
    super(props);
    this.state = {
        value: ''
    }
}

Answer 3

import * as React from 'react';
import { TextInput } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: {}
    };
   this.onChange = this.onChange.bind(this)
 }

 onChange(value) {
   this.setState({
    value
 })
}

render() {
  return (
    <PresentationalComponent 
      onChange={this.onChange}
    value={this.state.value}
  />
)
}
}

class PresentationalComponent extends React.Component {

render() {
return(
  <TextInput 
    onChangeText={this.props.onChange}
    value={this.props.value}
  />
)}
}

Answer 4

我相信其他两个答案都是正确的，但是您可以进一步简化代码，并使用箭头函数摆脱构造函数的声明：

class myContainerComponent extends Component {

    state = {
        value: ''
    }

    onChange = (value) => {
        this.setState({
            value
        })
    }

    render() {
        return (
            <PresentationalComponent
              onChange={this.onChange}
              value={this.state.value}
            />
        )
    }

}

React-native表单未在TextInput

4 个答案: