Javascript 在ReactJs中用按钮值填充输入

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

我用按钮构建了网格，每个按钮都有一个字母，但我不确定下一部分应该如何编码；每个按钮应该有两个声明，单击或不单击，如果单击，字母将显示在输入上，如果再次单击，则应将其删除

这些是我现在的组件：

方形

import React from "react"

class Square extends React.Component {

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

export default Square;

从“React”导入React
类Square扩展了React.Component{
render（）{
返回(
{this.props.letter}
);
}
}
导出默认方块；

输入组件

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”导入React；
类Clear扩展了React.Component{
render（）{
返回(
清除WordX
);
}
}
导出默认清除；

主要应用程序组件

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;

函数应用程序（）{
返回(
{LettersJSON.board.map（（字母，索引）=>）}
);
}
导出默认应用程序；

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

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

以下是该应用程序目前的外观：

---

考虑以下代码，这里也是为您准备的沙箱：

这是我们的应用程序组件。我们将在这里填充按钮，并给每个按钮一个字母，通过道具传递。我们还为每个按钮组件提供一个状态更新程序函数，该函数将更新应用程序组件的状态

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 Input extends React.Component {
  render() {
    return <input value={this.props.value} />
  }
}

export default Input

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clickedLetters: [],
    };
  }

  saveClickedLetter(letter) {
    const { clickedLetters } = this.state;
    const cloneOfClickedLetters = clickedLetters;
    cloneOfClickedLetters.push(letter);
    this.setState({ clickedLetters: cloneOfClickedLetters });
  }

  render() {
    const { clickedLetters } = this.state;
    return (
      <div className="App">
        <div className="container">
          <div className="letters">
            {LettersJSON.board.map( (letter, index) => <Square key={index} letter={letter} handleClick={this.saveClickedLetter}/>)}
          </div>
          <div className="controls">
            <Clear clickedLetters={clickedLetters.length > 0 && clickedLetters.join()}/>
          </div>
        </div>
      </div>
    )
  }
}
export default App;

从“React”导入React
从“react dom”导入react dom
从“./按钮”导入按钮
从“./Input”导入输入
类应用程序扩展了React.Component{
状态={
字母：[a'，b'，c'，d'，e']，
值：“”，
}
updateValue=字母=>{
console.log（'ran'）
这是我的国家({
value:this.state.value+字母，
})
}
createButtons=（）=>{
常量字母=this.state.letters
返回信件.map（信件=>(
))
}
render（）{
返回(
{this.createButtons（）}
)
}
}
ReactDOM.render（，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

从“React”导入React
类按钮扩展了React.Component{
状态={
点击：错，
}
handleOnClick=（）=>{
如果（！this.state.clicked）{
this.props.updateValue（this.props.letter）
这是我的国家({
对,，
})
}
}
render（）{
返回(
{this.props.letter}
)
}
}
导出默认按钮

最后，我们有输入组件：它只消耗父应用程序组件的值

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 Input extends React.Component {
  render() {
    return <input value={this.props.value} />
  }
}

export default Input

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clickedLetters: [],
    };
  }

  saveClickedLetter(letter) {
    const { clickedLetters } = this.state;
    const cloneOfClickedLetters = clickedLetters;
    cloneOfClickedLetters.push(letter);
    this.setState({ clickedLetters: cloneOfClickedLetters });
  }

  render() {
    const { clickedLetters } = this.state;
    return (
      <div className="App">
        <div className="container">
          <div className="letters">
            {LettersJSON.board.map( (letter, index) => <Square key={index} letter={letter} handleClick={this.saveClickedLetter}/>)}
          </div>
          <div className="controls">
            <Clear clickedLetters={clickedLetters.length > 0 && clickedLetters.join()}/>
          </div>
        </div>
      </div>
    )
  }
}
export default App;

从“React”导入React
类输入扩展了React.Component{
render（）{
返回
}
}
导出默认输入

---

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

考虑一下以下代码，这里也是为您准备的沙箱：

这是我们的应用程序组件。我们将在这里填充按钮，并给每个按钮一个字母，通过道具传递。我们还为每个按钮组件提供一个状态更新程序函数，该函数将更新应用程序组件的状态

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 Input extends React.Component {
  render() {
    return <input value={this.props.value} />
  }
}

export default Input

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clickedLetters: [],
    };
  }

  saveClickedLetter(letter) {
    const { clickedLetters } = this.state;
    const cloneOfClickedLetters = clickedLetters;
    cloneOfClickedLetters.push(letter);
    this.setState({ clickedLetters: cloneOfClickedLetters });
  }

  render() {
    const { clickedLetters } = this.state;
    return (
      <div className="App">
        <div className="container">
          <div className="letters">
            {LettersJSON.board.map( (letter, index) => <Square key={index} letter={letter} handleClick={this.saveClickedLetter}/>)}
          </div>
          <div className="controls">
            <Clear clickedLetters={clickedLetters.length > 0 && clickedLetters.join()}/>
          </div>
        </div>
      </div>
    )
  }
}
export default App;

从“React”导入React
从“react dom”导入react dom
从“./按钮”导入按钮
从“./Input”导入输入
类应用程序扩展了React.Component{
状态={
字母：[a'，b'，c'，d'，e']，
值：“”，
}
updateValue=字母=>{
console.log（'ran'）
这是我的国家({
value:this.state.value+字母，
})
}
createButtons=（）=>{
常量字母=this.state.letters
返回信件.map（信件=>(
))
}
render（）{
返回(
{this.createButtons（）}
)
}
}
ReactDOM.render（，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

从“React”导入React
类按钮扩展了React.Component{
状态={
点击：错，
}
handleOnClick=（）=>{
如果（！this.state.clicked）{
this.props.updateValue（this.props.letter）
这是我的国家({
对,，
})
}
}
render（）{
返回(
{this.props.letter}
)
}
}
导出默认按钮

最后，我们有输入组件：它只消耗父应用程序组件的值

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 Input extends React.Component {
  render() {
    return <input value={this.props.value} />
  }
}

export default Input

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clickedLetters: [],
    };
  }

  saveClickedLetter(letter) {
    const { clickedLetters } = this.state;
    const cloneOfClickedLetters = clickedLetters;
    cloneOfClickedLetters.push(letter);
    this.setState({ clickedLetters: cloneOfClickedLetters });
  }

  render() {
    const { clickedLetters } = this.state;
    return (
      <div className="App">
        <div className="container">
          <div className="letters">
            {LettersJSON.board.map( (letter, index) => <Square key={index} letter={letter} handleClick={this.saveClickedLetter}/>)}
          </div>
          <div className="controls">
            <Clear clickedLetters={clickedLetters.length > 0 && clickedLetters.join()}/>
          </div>
        </div>
      </div>
    )
  }
}
export default App;

从“React”导入React
类输入扩展了React.Component{
render（）{
返回
}
}
导出默认输入

---

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

让我们将所需内容分解为以下步骤：

单击组件应将其字母发送到父组件

该字母数组应存储在父组件中

输入的值应为该数组的值，但应为字符串

1） 为了使正方形组件可以单击，它需要一个onClick处理程序。单击后，我们将调用从父组件传递到Square的函数：

import React from "react"
class Square extends React.Component {
  render() {
    const { handleClick, letter } = this.props;
    return (
      <button type="button" className="square" onClick={() => handleClick(letter)}>
        {this.props.letter}
      </button>
    );
  }
}
export default Square;

从“React”导入React
类Square扩展了React.Component{
render（）{
const{handleClick，letter}=this.props；
返回(
handleClick（字母）}>
{this.props.let