Question

我在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，我不确定应该如何安排所有组件以便它们一起工作。

这是目前应用的外观：

Answer 1

考虑以下代码，这也是适合您的沙箱：

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

这是我们的App组件。我们将在此处填充按钮，并为每个按钮指定字母，并使其通过道具。我们还为每个Button组件提供了一个状态更新程序功能，该功能将更新我们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

让我知道这是否对您有帮助。我觉得这基本上提供了使代码正常工作所需的原理。

Answer 2

让我们将您想要的东西分解为步骤：

单击某个组件应将其字母发送给父组件。
该字母数组应存储在父组件中
输入的值应该是该数组的值，但必须是字符串。

1）为了使Square组件可单击，它需要一个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;

2）主应用程序控制器需要一个state属性来存储单击的字母，以便我们对其进行跟踪。我们还需要将这些字母传递给输入组件。

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;

最后，让我们传入clickedLetters属性以输入值的属性：

import React from 'react';
class Clear extends React.Component {
  render() {
    const { clickedLetters } = this.props;
    return (
      <div className="clear-btn">
        <button><span>Clear Word</span><span className="cross-icon">X</span></button>
        <input value={clickedLetters} className="cust-input" type="text"/>
      </div>
    );
  }
}
export default Clear;

在ReactJs中用按钮值填充输入

2 个答案: