Question

我是新手反应原生，我有一个代码块用于反应中的表单，需要使用相同的let变量AddTodo将其转换为反应原生元素

let AddTodo = ({ dispatch }) => {
let input

 return (
<div>
  <form onSubmit={e => {
    e.preventDefault()
    if (!input.value.trim()) {
      return
    }
    dispatch(addTodo(input.value))
    input.value = ''
  }}>
    <input ref={node => {
      input = node
    }} />
    <button type="submit">
      Add Todo
    </button>
  </form>
  </div>
 )
 }
 AddTodo = connect()(AddTodo)

有人可以帮我吗？这是source code

Answer 1

以下是react-native的简单代码，它可以从您的反应代码转换而来。您可以找到有关react-native here的更多信息。

在html中我们用于组其他元素，所以反应原生使用

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

class AddTodo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      todoText: ''
    };
  }
 render() {
   return (
     <View>
       <TextInput
         onChangeText={(todoText) => this.setState({todoText})}
         value={this.state.todoText}
       />
       <TouchableHighlight onPress={() => {
         if(this.state.todoText) {
           this.props.addTodo(input.value);
            this.setState({ todoText: '' })
         }
       }}>
         <Text>Add Todo</Text>
       </TouchableHighlight>
     </View>
   );
  }
}

function mapStateToProps(state) {
  return {};
}

function mapDispatchToProps(dispatch) {
  return {
    addTodo: bindActionCreators(addTodo, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(AddTodo);

您可以找到react-native redux todo示例here

转换反应还原块以反应原生

1 个答案: