输入框不会接受任何 ReactJS答案

【问题标题】：Input box won't accept anything ReactJS输入框不会接受任何 ReactJS
【发布时间】：2018-11-13 13:29:47
【问题描述】：

我有这个代码，但我不能让它工作。输入行根本不接受任何东西。我试着到处搜索都无济于事，所以我决定最后问这个问题。附言我是新来的反应

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

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

【问题讨论】：

问题在于newValue[0][e.target.name] 您的输入没有名称。我想你的意思是newValue[0][name]

标签： javascript reactjs input data-binding

【解决方案1】：

您没有在 Input 元素上定义 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>
)

【讨论】：

【解决方案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'));

【讨论】：