Question

我有这段代码，但我无法使其正常运行。输入线只是不接受任何东西。我试着在整个地方搜索无济于事，所以我决定最后问这个问题。附：我是新来的反应

it('should create a product', () => {
  component.onAddProd()
  expect(component.areWeWaiting).toBeTruthy()
})

抱歉，我忘了提到我想将数组维护为一个对象数组。目标是使第一个输入和第二个输入具有相同的值。意思是，改变一个输入将使另一个输入相同。

Answer 1

您的输入元素上没有定义name属性，因此值不会发生变化。将代码更新为

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>
)

Answer 2

你正在覆盖你的州。 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'));

输入框不会接受任何ReactJS

2 个答案: