Поле ввода не принимает ничего ReactJS

Question

У меня есть этот код, но я не могу заставить его работать.Строки ввода просто не примут ничего.Я попытался искать повсюду безрезультатно, поэтому я решил, наконец, задать вопрос.PS Я новичок, чтобы реагировать

class App extends React.Component {
  state = { inputValue: [{item:'', name:''}] }
  handleChange = e => {
    const newValue = [...this.state.inputValue];
    newValue[0][e.target.name] = e.target.value;
    this.setState({inputValue: newValue});
  }

  render(){
    return(
      <div className='container jumbotron'>
        <div className="row">
          <div className="col">
            <FirstInput handleChange={this.handleChange} inputValue={this.state.inputValue[0].name}/>
          </div>
          <div className="col">
            <SecondInput handleChange={this.handleChange} inputValue={this.state.inputValue[0].name}/>     
          </div>
        </div>
      </div>
    );
  }
}

const FirstInput = (props) => (
  <div>
    <label>First Input</label>
    <input className="form-control" onChange={props.handleChange} value={props.inputValue}/>
  </div>
)

const SecondInput = ({inputValue, handleChange}) => (
  <div>
    <label>Second Input</label>
    <input className="form-control" onChange={handleChange} value={inputValue}/>
  </div>
)

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

Извините, я забыл упомянуть, что я хочу сохранить массив как массив объектов.Цель состоит в том, чтобы первый вход и второй вход имели одинаковое значение.Это означает, что изменение одного входа сделает другой вход таким же.

Answer 1

Вы перезаписываете свое состояние.inputValue: [{item:'', name:''}] - это массив, и handleChange вы пытаетесь присвоить строковому значению.

Ваш код должен выглядеть так:

class App extends React.Component {
  state = { 
     firstInput: '',
     secondInput: '' 
  }

  handleChange = e => {
    this.setState({
         [e.target.name]: e.target.value;
    });
  }

  render(){
    return(
      <div className='container jumbotron'>
        <div className="row">
          <div className="col">
            <Input 
                label="First Input"
                name="firstInput"
                handleChange={this.handleChange} 
                inputValue={firstInput}/>
          </div>
          <div className="col">
            <Input 
                label="First Input"
                name="secondInput"
                handleChange={this.handleChange} 
                inputValue={secondInput}/>     
          </div>
        </div>
      </div>
    );
  }
}

const Input = (props) => (
  <div>
    {props.label && <label>{props.label}</label>}
    <input 
       className="form-control" 
       onChange={props.handleChange} 
       name={props.name}
       value={props.inputValue}/>
  </div>
)


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

Answer 2

У вас нет атрибута name, определенного в ваших элементах Input, и, следовательно, значение не меняется.Обновите ваш код до

class App extends React.Component {
  state = { inputValue: [{ item: '', name: '' }, { item: '', name: '' }] }
  handleChange = e => {
    const newValue = [...this.state.inputValue];
    newValue[0][e.target.name] = e.target.value;
    this.setState({ inputValue: newValue });
  }

  render() {
    return (
      <div className='container jumbotron'>
        <div className="row">
          <div className="col">
            <FirstInput handleChange={this.handleChange} inputValue={this.state.inputValue[0].name} />
          </div>
          <div className="col">
            <SecondInput handleChange={this.handleChange} inputValue={this.state.inputValue[0].item} />
          </div>
        </div>
      </div>
    );
  }
}

const FirstInput = (props) => (
  <div>
    <label>First Input</label>
    <input className="form-control" name="name" onChange={props.handleChange} value={props.inputValue} />
  </div>
)

const SecondInput = ({ inputValue, handleChange }) => (
  <div>
    <label>Second Input</label>
    <input className="form-control" name="item" onChange={handleChange} value={inputValue} />
  </div>
)