Javascript 如何将按钮列表重构为映射函数

在我的刽子手游戏中，玩家可以点击 一封信（按钮） 猜中的字母显示 如果正确，则将其附加到隐藏字（

但我想重构一长串按钮 转换为一个简单的映射函数 为数组中的每个字母（即字母表）创建一个按钮 理想情况下，该按钮会在单击后消失

比如：

arr = [alphabet]
arr.map(letter=>{
return <button>{letter}</button> 
})

arr=[字母表]
arr.map（字母=>{
返回{letter}
})

但我不知道如何将我的列表转换成这样一个函数

export class Input extends Component {

  handleClick = (event) => {

    if (this.props.guesses.includes(event.target.value)) {

    } else {
      this.props.makeGuess(event.target.value.toLowerCase())
    }
    // event.target.setAttribute('disabled', '')

  }

  render() {
    return (<div>

      <button onClick={this.handleClick} value="A">A</button>
      <button onClick={this.handleClick} value="B">B</button>
      <button onClick={this.handleClick} value="C">C</button>
      <button onClick={this.handleClick} value="D">D</button>
      <button onClick={this.handleClick} value="E">E</button>
      <button onClick={this.handleClick} value="F">F</button>
      <button onClick={this.handleClick} value="G">G</button>
      <button onClick={this.handleClick} value="H">H</button>
      <button onClick={this.handleClick} value="I">I</button>
      <button onClick={this.handleClick} value="J">J</button>
      <button onClick={this.handleClick} value="K">K</button>
      <button onClick={this.handleClick} value="L">L</button>
      <button onClick={this.handleClick} value="M">M</button>
      <button onClick={this.handleClick} value="N">N</button>
      <button onClick={this.handleClick} value="O">O</button>
      <button onClick={this.handleClick} value="P">P</button>
      <button onClick={this.handleClick} value="Q">Q</button>
      <button onClick={this.handleClick} value="R">R</button>
      <button onClick={this.handleClick} value="S">S</button>
      <button onClick={this.handleClick} value="T">T</button>
      <button onClick={this.handleClick} value="U">U</button>
      <button onClick={this.handleClick} value="V">V</button>
      <button onClick={this.handleClick} value="W">W</button>
      <button onClick={this.handleClick} value="X">X</button>
      <button onClick={this.handleClick} value="Y">Y</button>
      <button onClick={this.handleClick} value="Z">Z</button>
    </div>)
  }
}

导出类输入扩展组件{
handleClick=（事件）=>{
if（this.props.guesss.includes（event.target.value））{
}否则{
this.props.makeGuess（event.target.value.toLowerCase（））
}
//event.target.setAttribute（'disabled'，''）
}
render（）{
返回(
A.
B
C
D
E
F
G
H
我
J
K
L
M
N
O
P
Q
R
s
T
U
v
W
X
Y
Z
)
}
}

您的渲染方法应该是：

render() {
  const alphabet = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];

  return (
    <div>
      {alphabet.map((letter, index) => <button key={} onClick={this.handleClick} value={letter}>{letter}</button>)}
    </div>
  );
}

render（）{
常量字母=[…'ABCDEFGHIJKLMNOPQRSTUVWXYZ']；
返回(
{alphabet.map（（字母，索引）=>{letter}）
);
}

您只需在

render

下定义一个函数，该函数创建要渲染的元素数组。试试这个：

export class Input extends Component {
  render() {
    function buttonList() {
        const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
        return alphabet.map(letter => {
            return <button onClick={this.handleClick} key={letter}>{letter}</button> 
        });
    }
    return (
        <div>{buttonList()}</div>
    );
  }
}

导出类输入扩展组件{
render（）{
函数按钮列表（）{
常量字母='abcdefghijklmnopqrstuvwxyz'。拆分（''；
返回字母表.map（字母=>{
返回{letter}
});
}
返回(
{buttonList（）}
);
}
}

---

您还需要在每个元素上设置

键

值，否则您将得到一个React警告。

以下是一个完整组件的示例，该组件可过滤掉字母：

export class Input extends Component {
  constructor() {
    super()

    this.state = {
      letters: [/* the letters */],
    }
  }


  handleClick = letter => () => {
    this.props.makeGuess(letter.toLowerCase())
    this.setState({ letters: this.state.letters.filter(l => l !== letter) })
  }

  render() {
    return (<div>
      {this.state.letters.map(letter => 
        <button key={letter} onClick=this.handleClick(letter)>{letter}</button>
      )}
    </div>
  }
}

导出类输入扩展组件{
构造函数（）{
超级（）
此.state={
字母：[/*字母*/]，
}
}
handleClick=字母=>（）=>{
this.props.makeGuess（letter.toLowerCase（））
this.setState（{letters:this.state.letters.filter（l=>l！==letter）}）
}
render（）{
返回(
{this.state.letters.map（letter=>
{字母}
)}
}
}

---

此示例使用所有字母初始化状态，然后使用currying根据传入的字母为每个按钮创建自定义单击处理程序。这些函数过滤掉它们的字母并更新状态，从而导致在没有该字母的情况下重新呈现。这样就根本不需要使用值或处理事件。

以下是一个示例如何迭代字母数组并为每个字母输出一个按钮：

export class Input extends Component {
  const handleClick = e => {
    // Your logic here...
  };

  const alphabet = [ // Letters of the alphabet... ];
  const buttons = alphabet.map(letter => (
    <button value={letter} onClick={handleClick}>
      {letter}
    </button>
  ));

  return <div>{buttons}</div>;
}

导出类输入扩展组件{
常量handleClick=e=>{
//你的逻辑在这里。。。
};
常量字母=[//字母表中的字母…]；
常量按钮=字母表.map（字母=>(
{字母}
));
返回{按钮}；
}

谢谢你帮我解决了这个问题！还是在handleClick事件中，//event.target.setAttribute（'disabled'，''）//使字母一旦被点击就变得不可点击，当我开始一个新游戏时，它会重新呈现一个新的随机单词，但字母仍然不可点击……有没有关于在哪里查找或如何解决这个问题的建议？