Próbuję użyć funkcji w funkcji wiązania, korzystając z odpowiedzi podanej w Czy mogę mieć funkcję w stanie w reakcji?. Próbowałem również użyć JSON.Stringify of 'Const Data'. Mogę drukować przyciski, ale próbuję zapisać kliknięte przyciski w wartości.

const InitArr = ({ myArray, handleClick }) => ( <div> {myArray.map(item => (<button onClick={() => handleClick(item.key)}>{item.key}</button> ))}    </div>)
class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {myArray: [{"key": "7"},{"key": "8"},{"key": "9"},{"key": "4"},{"key": "5"},{"key": "6"},{"key": "1"},{"key": "2"},{"key": "3"},{"key": "0"}], value: '0', };
     this.setValues = this.setValues.bind(this)
     this.handleClick = this.handleClick.bind(this)
   }
   setValues(key) {
      const temp = key
   }
   handleClick(key) {
       const { value } = this.state
       const data = setValues(key)
       this.setState({ value: data })
    }
    render() {
    return (
       <div>
          <div>{this.state.value}</div>
              <InitArr myArray={this.state.myArray} handleClick={this.handleClick} />
       </div>
     );}}
     ReactDOM.render( <App />, document.getElementById("root"));
-1
user6642297 28 październik 2020, 05:45

1 odpowiedź

Najlepsza odpowiedź

Problem z kodem jest to, że dzwoniłeś setValues(key), a nie this.setValues(key), więc nie można znaleźć setValues w bieżącym zakresie.

Zmiana, która pozwala na uruchomienie kodu, choć zmieniłem również setValue, aby zwrócić coś, więc renderowany numer nie tylko znikną:

setValues(key) {
    const temp = key;
    return key;
  }
const InitArr = ({ myArray, handleClick }) => (
  <div>
    {' '}
    {myArray.map((item) => (
      <button onClick={() => handleClick(item.key)}>{item.key}</button>
    ))}{' '}
  </div>
);
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myArray: [
        { key: '7' },
        { key: '8' },
        { key: '9' },
        { key: '4' },
        { key: '5' },
        { key: '6' },
        { key: '1' },
        { key: '2' },
        { key: '3' },
        { key: '0' },
      ],
      value: '0',
    };
    this.setValues = this.setValues.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }
  setValues(key) {
    const temp = key;
    return key;
  }
  handleClick(key) {
    const { value } = this.state;
    console.log(key);
    const data = this.setValues(key);
    this.setState({ value: data });
  }
  render() {
    return (
      <div>
        <div>{this.state.value}</div>
        <InitArr myArray={this.state.myArray} handleClick={this.handleClick} />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
2
Zachary Haber 28 październik 2020, 02:56