时间戳

首页 > 解决方案 > How can I generate multiple textInput component with using "each" and how I can changed the state with combination of all

javascript - How can I generate multiple textInput component with using "each" and how I can changed the state with combination of all

问题描述

I want a develop text based word game. Every level word's length will change.I will split every letter into one box and my matrix also changed like (10 words , length :10 => 10x10 matrix). How can I generate a multiple textInput component with this variables. I want to create something look like that imgur.com/a/6Dtjy2g. Every row include one word and every box include the one letter also. I wanted to fill the every box and update my state, in the end will check it with the answer.

标签： javascriptreactjsreact-native

解决方案

基本上，要根据需要呈现视图，您的代码应如下所示。关于状态设计，很大程度上取决于你的游戏逻辑，你可以通过编辑你的问题来分享更多。

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

class Board extends React.Component {
  state = { board: [
            "wordword01", "wordword02", "wordword03", "wordword04", "wordword05",
            "wordword06", "wordword07", "wordword08", "wordword09", "wordword10"
  ]};

  render() {
    return (
      <View>
        {this.state.board.map(word => (
          <TextInput defaultValue={word}/>
        ))}
      </View>
    )
  }
}

export default Board;

推荐阅读