用 ReactJs 中的按钮值填充输入

debugcn 发表于 Dev

伊万S95

我正在用 ReactJS 构建一个小应用程序，它由一个以字母为值的按钮网格组成，我需要做的是用单击的按钮的字母填充输入字段，基本上就像键盘一样。

我已经用按钮构建了网格，每个按钮都有一个字母，但我不确定我应该如何编码下一部分；每个按钮应该有两个声明，要么点击，要么不点击，如果点击，字母会出现在输入上，如果再次点击，它应该被删除。

这些是我现在的组件：

正方形

import React from "react"

class Square extends React.Component {

    render() {
        return (
                <button type="button" className="square">{this.props.letter}</button>
        );
    }
}

export default Square;

输入组件

import React from 'react';

class Clear extends React.Component {
    render() {
        return (
            <div className="clear-btn">
                <button><span>Clear Word</span><span className="cross-icon">X</span></button>
                <input className="cust-input" type="text"/>
            </div>
        );
    }
}

export default Clear;

主应用组件

function App() {
  return (
    <div className="App">
      <div className="container">
        <div className="letters">
          {LettersJSON.board.map( (letter, index) => <Square key={index} letter={letter}/>)}
        </div>
        <div className="controls">
          <Clear />
        </div>
      </div>
    </div>
  );
}

export default App;

如果有人可以帮助我，那就太好了，我不知道什么是获取按钮值并在单击时将其添加到输入中的好方法。

我想这必须通过事件或类似的东西来完成，老实说，我刚刚开始学习 React，我不确定我应该如何安排所有组件以便它们一起工作。

这是应用程序现在的样子：

很酷的家伙

考虑以下代码，这里还有适合您的沙箱：

https://codesandbox.io/s/6xpzvpno1r

这是我们的 App 组件。我们将在此处填充按钮并为每个按钮赋予字母，并通过 props 传递它。我们还为每个 Button 组件提供了一个 state-updater 函数，该函数将更新我们的 App 组件的状态。

import React from 'react'
import ReactDOM from 'react-dom'
import Button from './Button'
import Input from './Input'

class App extends React.Component {
  state = {
    letters: ['a', 'b', 'c', 'd', 'e'],
    value: '',
  }

  updateValue = letter => {
    console.log('ran')
    this.setState({
      value: this.state.value + letter,
    })
  }

  createButtons = () => {
    const letters = this.state.letters
    return letters.map(letter => (
      <Button letter={letter} updateValue={this.updateValue} />
    ))
  }

  render() {
    return (
      <div>
        {this.createButtons()}
        <Input value={this.state.value} />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

按钮组件：这里我们一直在点击时调用状态更新函数，并跟踪它之前是否被点击过。

import React from 'react'

class Button extends React.Component {
  state = {
    clicked: false,
  }

  handleOnClick = () => {
    if (!this.state.clicked) {
      this.props.updateValue(this.props.letter)
      this.setState({
        clicked: true,
      })
    }
  }

  render() {
    return (
      <button onClick={this.handleOnClick} disabled={this.state.clicked}>
        {this.props.letter}
      </button>
    )
  }
}

export default Button

最后我们有我们的 Input 组件：它只消耗来自父 App 组件的值。

import React from 'react'

class Input extends React.Component {
  render() {
    return <input value={this.props.value} />
  }
}

export default Input

如果这对您有帮助，请告诉我。我觉得这基本上提供了让代码工作所需的原则。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。