Question

我有一个子输入组件。单击按钮时如何从父级检查每个const child = document.createElement("div"); child.style.backgroundColor = "blue"; child.style.width = "100px"; child.style.height = "100px"; child.style.transition = "1s"; parent.appendChild(child); requestAnimationFrame(() => setTimeout(() => { child.style.width = "200px"; }) );字段值？ https://jsfiddle.net/sj83cL4a/

input

https://jsfiddle.net/sj83cL4a/

Answer 1

因此，您希望在单击按钮时获取值，因此需要标识每个输入并将其设置为状态，因此我们将使用controlled component

<Input onChangeOfInput={this.onChangeOfInput} placeholder="Title 1" name="Title1" />
<br/>
<Input placeholder="Title 2" name="Title2" onChangeOfInput={this.onChangeOfInput} />
<br/>
<Input placeholder="Title 3" name="Title3" onChangeOfInput={this.onChangeOfInput}/>
<br/>
<Input placeholder="Title 4" name="Title4" onChangeOfInput={this.onChangeOfInput}/>
<br/>
<button onClick={this.getValues}>Get value</button>

这里的名称是唯一键

向父项添加一个功能

  onChangeOfInput =(name,value) =>{
    this.setState({
            [name]: value
        });
  }

孩子的回叫

handleChange(e) {      
        this.setState({
            inputvalue: e.target.value
        });
       this.props.onChangeOfInput(this.props.name,e.target.value)
}

并在需要时使用状态

 getValues = () =>{
    console.log(this.state);
  }

demo

Answer 2

尝试将$newattendance_date = $request['item']['attendance_date']; if(strpos($newattendance_date,' GMT') !== false){ $newattendance_date = substr($newattendance_date,0,strpos($newattendance_date,' GMT')); $newattendance_date = strtotime($newattendance_date); $newattendance_date = date('Y-m-d', $newattendance_date); } $attendance_date= $newattendance_date;与updateInputValue传递给特定的setState子级，然后调用更新：

Input

class App extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
      input1: null,
      input2: null,
      input3: null,
      input4: null
		}
	}
  
  updateInputValue(target, val) {
    this.setState({[target]: val})
  }
  
	render() {
		return (
			<div className="hello">
      <Input name="input1" updateInputValue={this.updateInputValue.bind(this)}
      placeholder="Title 1" />
      <br/>
      <Input name="input2" updateInputValue={this.updateInputValue.bind(this)} placeholder="Title 2" />
      <br/>
      <Input name="input3" updateInputValue={this.updateInputValue.bind(this)} placeholder="Title 3" />
      <br/>
      <Input name="input4" updateInputValue={this.updateInputValue.bind(this)} placeholder="Title 4" />
      <br/>
      <button>Get value</button>
      <div>{this.state.input1}</div>        
      <div>{this.state.input2}</div>
      <div>{this.state.input3}</div>
      <div>{this.state.input4}</div>
			</div>
    )
  }
}
  
class Input extends React.Component  { 
  constructor(props) {
    super(props)
    this.state = {
      inputvalue: ''
    }
  }

  handleChange(e) {
    this.setState({
      inputvalue: e.target.value
    })
    this.props.updateInputValue(this.props.name, e.target.value);
  }

  render() {
    return (
      <input 
      type="text" 
      placeholder={this.props.placeholder} 
      value={this.state.inputvalue} 
      onChange={this.handleChange.bind(this)}
      />
    )
  }
}
    
ReactDOM.render(<App />, document.querySelector("#app"))

反应检查孩子输入字段值

2 个答案: